Javascript MVC dropzone没有';不要在IE中上传文件
请帮忙。我正在进行一个MVC项目,使用dropzone上传基于此示例的多个文件 我在Chrome上做过这项工作,但我不明白为什么它不能在IE 11上工作。当我在VS2013中调试时,它似乎不会触发SaveUploadedFile操作。同样,它在Chrome中工作。以下是我的MVC项目中的代码: 查看:Javascript MVC dropzone没有';不要在IE中上传文件,javascript,asp.net,asp.net-mvc,asp.net-mvc-4,dropzone.js,Javascript,Asp.net,Asp.net Mvc,Asp.net Mvc 4,Dropzone.js,请帮忙。我正在进行一个MVC项目,使用dropzone上传基于此示例的多个文件 我在Chrome上做过这项工作,但我不明白为什么它不能在IE 11上工作。当我在VS2013中调试时,它似乎不会触发SaveUploadedFile操作。同样,它在Chrome中工作。以下是我的MVC项目中的代码: 查看: @Styles.Render("~/Content/css") <div class="container"> <div class="jumbotron">
@Styles.Render("~/Content/css")
<div class="container">
<div class="jumbotron">
<form action="~/PhotoAlbum/SaveUploadedFile/@Model.AlbumID" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
<div class="fallback">
<input name="file" type="file" multiple />
<input type="submit" value="Upload" />
</div>
</form>
</div>
</div> <!-- /container -->
<style type="text/css">
.dz-max-files-reached { background-color: red; }
</style>
@section scripts {
@Scripts.Render("~/bundles/dropzonescripts")
<script type="text/javascript">
//File Upload response from the server
Dropzone.options.dropzoneForm = {
maxFiles: 20,
init: function () {
this.on("maxfilesexceeded", function (data) {
var res = eval('(' + data.xhr.responseText + ')');
});
this.on("onSuccess", function (data) {
alert("Upload successfully!");
});
this.on("onError", function (data) {
alert("Upload Failed!");
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-info glyphicon glyphicon-remove-sign'> Remove </button>");
alert("Upload Failed!");
// Capture the Dropzone instance as closure.
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
}
};
</script>
}
public ActionResult SaveUploadedFile(int id)
{
EZone_PhotoAlbum ezAlbum = repoAlbum.GetPhotoAlbumByID(id);
bool isSavedSuccessfully = true;
string fName = "";
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
//Save file content goes here
fName = file.FileName;
if (file != null && file.ContentLength > 0)
{
var originalDirectory = new DirectoryInfo(string.Format("{0}\\", Server.MapPath(sMapPath + "\\" + ezAlbum.AlbumFolder)));
string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "original");
var fileName1 = Path.GetFileName(file.FileName);
bool isExists = System.IO.Directory.Exists(pathString);
if (!isExists)
System.IO.Directory.CreateDirectory(pathString);
var path = string.Format("{0}\\{1}", pathString, fileName1);
file.SaveAs(path);
}
}
if (isSavedSuccessfully)
{
return Json(new { Message = fName });
}
else
{
return Json(new { Message = "Error in saving file" });
}
}
General:
Remote Address:[::1]:80
Request URL:http://localhost/eZone/PhotoAlbum/SaveUploadedFile/2
Request Method:POST
Status Code:200 OK
Response Headers: view parsed
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 5.1
X-AspNet-Version: 4.0.30319
Persistent-Auth: true
X-Powered-By: ASP.NET
WWW-Authenticate: Negotiate oRswGaADCgEAoxIEEAEAAABDh+CIwTbjqQAAAAA=
Date: Fri, 26 Jun 2015 16:01:30 GMT
Content-Length: 26
Request Headers view parsed
POST /eZone/PhotoAlbum/SaveUploadedFile/2 HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 3501896
Authorization: Negotiate oXcwdaADCgEBoloEWE5UTE1TU1AAAwAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAABXCiOIGAbEdAAAAD6cslqGeHsjhn4ZY5uX0W2mjEgQQAQAAAPUXp1AtIpqEAAAAAA==
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarySvGz79kd1fOGLop0
Accept: application/json
Cache-Control: no-cache
X-Requested-With: XMLHttpRequest
Referer: http://localhost/eZone/photoalbum/Detail/2
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Request Payload
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="null"
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="null"
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="file"; filename="IMG_0057.JPG"
Content-Type: image/jpeg
------WebKitFormBoundarySvGz79kd1fOGLop0--
.Headers:
@Styles.Render("~/Content/css")
<div class="container">
<div class="jumbotron">
<form action="~/PhotoAlbum/SaveUploadedFile/@Model.AlbumID" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
<div class="fallback">
<input name="file" type="file" multiple />
<input type="submit" value="Upload" />
</div>
</form>
</div>
</div> <!-- /container -->
<style type="text/css">
.dz-max-files-reached { background-color: red; }
</style>
@section scripts {
@Scripts.Render("~/bundles/dropzonescripts")
<script type="text/javascript">
//File Upload response from the server
Dropzone.options.dropzoneForm = {
maxFiles: 20,
init: function () {
this.on("maxfilesexceeded", function (data) {
var res = eval('(' + data.xhr.responseText + ')');
});
this.on("onSuccess", function (data) {
alert("Upload successfully!");
});
this.on("onError", function (data) {
alert("Upload Failed!");
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class='btn btn-info glyphicon glyphicon-remove-sign'> Remove </button>");
alert("Upload Failed!");
// Capture the Dropzone instance as closure.
var _this = this;
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
_this.removeFile(file);
// If you want to the delete the file on the server as well,
// you can do the AJAX request here.
});
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
}
};
</script>
}
public ActionResult SaveUploadedFile(int id)
{
EZone_PhotoAlbum ezAlbum = repoAlbum.GetPhotoAlbumByID(id);
bool isSavedSuccessfully = true;
string fName = "";
foreach (string fileName in Request.Files)
{
HttpPostedFileBase file = Request.Files[fileName];
//Save file content goes here
fName = file.FileName;
if (file != null && file.ContentLength > 0)
{
var originalDirectory = new DirectoryInfo(string.Format("{0}\\", Server.MapPath(sMapPath + "\\" + ezAlbum.AlbumFolder)));
string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "original");
var fileName1 = Path.GetFileName(file.FileName);
bool isExists = System.IO.Directory.Exists(pathString);
if (!isExists)
System.IO.Directory.CreateDirectory(pathString);
var path = string.Format("{0}\\{1}", pathString, fileName1);
file.SaveAs(path);
}
}
if (isSavedSuccessfully)
{
return Json(new { Message = fName });
}
else
{
return Json(new { Message = "Error in saving file" });
}
}
General:
Remote Address:[::1]:80
Request URL:http://localhost/eZone/PhotoAlbum/SaveUploadedFile/2
Request Method:POST
Status Code:200 OK
Response Headers: view parsed
HTTP/1.1 200 OK
Cache-Control: private
Content-Type: application/json; charset=utf-8
Server: Microsoft-IIS/7.5
X-AspNetMvc-Version: 5.1
X-AspNet-Version: 4.0.30319
Persistent-Auth: true
X-Powered-By: ASP.NET
WWW-Authenticate: Negotiate oRswGaADCgEAoxIEEAEAAABDh+CIwTbjqQAAAAA=
Date: Fri, 26 Jun 2015 16:01:30 GMT
Content-Length: 26
Request Headers view parsed
POST /eZone/PhotoAlbum/SaveUploadedFile/2 HTTP/1.1
Host: localhost
Connection: keep-alive
Content-Length: 3501896
Authorization: Negotiate oXcwdaADCgEBoloEWE5UTE1TU1AAAwAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAAAAAAABYAAAAAAAAAFgAAAAAAAAAWAAAABXCiOIGAbEdAAAAD6cslqGeHsjhn4ZY5uX0W2mjEgQQAQAAAPUXp1AtIpqEAAAAAA==
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarySvGz79kd1fOGLop0
Accept: application/json
Cache-Control: no-cache
X-Requested-With: XMLHttpRequest
Referer: http://localhost/eZone/photoalbum/Detail/2
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Request Payload
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="null"
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="null"
------WebKitFormBoundarySvGz79kd1fOGLop0
Content-Disposition: form-data; name="file"; filename="IMG_0057.JPG"
Content-Type: image/jpeg
------WebKitFormBoundarySvGz79kd1fOGLop0--
。回复:
{“消息”:“IMG_0057.JPG”}
IE Developer Tools中的网络监视器向您显示了有关请求
SaveUploadedFile/id
的哪些信息?它显示了appname/photoalbum/SaveUploadedFile/2(2是相册的id)。您需要检查请求/响应头和正文。这将有助于诊断出哪里出了问题。我发布了开发者工具网络视图中的标题和响应。我没发现有什么不对劲。也许你能看到。我在SaveUploadedFile方法中设置了一个断点,它没有停止。根据响应头,上载成功:HTTP/1.1200 OK
。另外,您的响应表明它已到达返回Json(new{Message=fName})
。断点在哪里?您确定调试器正在运行吗?IE Developer Tools中的网络监视器向您显示了有关请求SaveUploadedFile/id
?它显示了appname/photoalbum/SaveUploadedFile/2(2是相册的id)。您需要检查请求/响应头和正文。这将有助于诊断出哪里出了问题。我发布了开发者工具网络视图中的标题和响应。我没发现有什么不对劲。也许你能看到。我在SaveUploadedFile方法中设置了一个断点,它没有停止。根据响应头,上载成功:HTTP/1.1200 OK
。另外,您的响应表明它已到达返回Json(new{Message=fName})
。断点在哪里?您确定调试器正在运行吗?