Javascript MVC dropzone没有';不要在IE中上传文件

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">

请帮忙。我正在进行一个MVC项目,使用dropzone上传基于此示例的多个文件

我在Chrome上做过这项工作,但我不明白为什么它不能在IE 11上工作。当我在VS2013中调试时,它似乎不会触发SaveUploadedFile操作。同样,它在Chrome中工作。以下是我的MVC项目中的代码:

查看:

@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})
。断点在哪里?您确定调试器正在运行吗?