jquery Chrome 中的文件上传插件问题

Question

我的 jquery.filedrop.js 插件有问题。

它在这个项目的 VS2012 版本中确实有效，所以我不确定为什么在我的这个项目的新 VS2015 版本中出现问题。

该应用程序最初是在 VS2012 的 Asp.Net MVC 5 中开发的。然后我将它毫无问题地移植到 VS2015，并继续进行进一步的开发。

当我 drag/drop 拖放区的 cvs 文件时 jquery.filedrop.js 插件出现异常（另请参见下面的屏幕截图）：

xhr.sendAsBinary() exception

在 Upload.cshtml 中，我有这个 js 和 html 代码：

$(".dropzone").filedrop({
 url: "@Url.Action("_UploadMultiple", "Portfolio")",
 paramname: "files",
 maxFiles: 10,
 maxfilesize: 10, // max file size in MB
 allowedfiletypes: [], // ["text/plain", "text/csv", "application/csv", "text/xml", "application/xml"] // Filetypes allowed by Content-Type, empty array means no restrictions
 allowedfileextensions: [".csv", ".xml"],
 dragOver: function () {
  $(".dropzone").css("background", "#eee");
 },
 dragLeave: function () {
  $(".dropzone").css("background", "#fff");
 },
 drop: function () {
  $(".dropzone").css("background", "#eee");
  // Add spinner
  $(".dropzone > p").html("<i class='fa fa-2x fa-refresh fa-spin'></i><br /><strong>Processing</strong>");
  
 },
 afterAll: function () {
  Alert.windowOk("Completed", "All files were processed. Please check the output for details.", "success",
   function () {
    $(".dropzone").css("background", "#fff");
    // Remove spinner
    $(".dropzone > p").html("<i class='fa fa-2x fa-arrow-up'></i><br /><strong>Drop CSV or XML files here to upload</strong>");
   }
  );
 },
 uploadFinished: function (i, file, response, time) {
  UP.updateResults(response);
 },
 error: function (err, file) {
  switch (err) {
   default:
    break;
  }
  $(".dropzone").css("background", "#fff");
  // Remove spinner
  $(".dropzone > p").html("<i class='fa fa-2x fa-arrow-up'></i><br /><strong>Drop CSV or XML files here to upload</strong>");
 }
});

@{
    ViewBag.Title = "Upload";
    ViewBag.Breadcrumb = "Upload";
}

@section styles {
  /* styles are here...*/
}

<form id="upload-form" action="@Url.Action("_Upload", "Portfolio")" method="POST" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<div class="row"> 
 <div class="col-md-2 dropzone" style="margin-top:10px;">
  <p class="text-center" style="margin-top:10px;">
   <i class="fa fa-2x fa-arrow-up"></i>
   <br />
   <strong>Drop CSV or XML files here to upload</strong>
  </p>
 </div>
</div>
</form>

@section scripts {
    <script src="@Url.Content("~/Scripts/jquery.filedrop.js")" type="text/javascript"></script>

我的 jquery 版本是：jQuery JavaScript Library v1.10.2，与原始项目相同，具有工作的 filedrop 版本。

jquery.filedrop.js 是 Version: 0.1.0 从 https://github.com/weixiyen/jquery-filedrop

下载的

在这个屏幕截图中，我展示了一旦发生异常并且处理微调器保持动画状态时的样子。

我想知道我是否在某处遇到 jquery 冲突，是否有人可以提供一些指导来解决此异常。

谢谢，鲍勃

Answer 1

我将冲突追溯到 pace.js，由 inspinia.js 设计模板使用（我从 wrapbootstrap.com 获得了 inspinia 模板）。

在 BundleConfig.cs 中注释掉 pace.min.js 消除了冲突。

现在弄清楚它们 pace.js 和 fileupload 如何并存...

bundles.Add(new ScriptBundle("~/bundles/plugins").Include(
                      "~/Scripts/plugins/metisMenu/metisMenu.min.js",
                      //"~/Scripts/plugins/pace/pace.min.js",
                      "~/Scripts/plugins/inspinia/inspinia.js",
                      "~/Scripts/plugins/inspinia/skin.config.min.js"));

查看 Chrome 调试 window 中的 jquery.filedrop.js。当我将鼠标悬停在 XMLHttpRequest 对象上时，您可以看到 pace.min 引用。

jquery Chrome 中的文件上传插件问题

jquery fileupload plugin issues in Chrome

jquery

jquery-ui

jquery-plugins

asp.net-mvc-5