2016-04-29 16 views
0

jquery.filedrop.jsプラグインに問題があります。jquery fileuploadプラグインの問題(Chrome)

このプロジェクトのVS2012バージョンでは機能するので、このプロジェクトの新しいVS2015バージョンが壊れた理由はわかりません。

このアプリケーションはもともとVS2012のAsp.Net MVC 5で開発されました。その後、問題なくVS2015に移植し、さらに開発を進めました。

xhr.sendAsBinary() exception

Upload.cshtml

xhr.sendAsBinary() exception

、私はこれを持っている:私はドロップエリアにCSVファイルをドロップ/ドラッグする

例外は、(下記のスクリーンショットを参照)jquery.filedrop.jsプラグインで発生しますjsとhtmlコード:

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

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

私のjqueryバージョンは、jQuery JavaScript Library v1.10.2です。これは、作業中のフィールド版の元のプロジェクトと同じです。

jquery.filedrop.jsはこのスクリーンショットではhttps://github.com/weixiyen/jquery-filedrop

からダウンロードVersion: 0.1.0ですが、私は例外が発生し、処理スピナーがアニメーション残ったら、それはどのように見えるかを示しています。

enter image description here

私はどこかjqueryの競合を持っている場合、私は思ったんだけど、誰かがこの例外を解決するためにどのようにいくつかのガイダンスを提供することができれば。

は、 ボブ

答えて

0

をありがとう、私はinspinia.jsデザインテンプレート(私はwrapbootstrap.comからinspiniaテンプレートを得た)によって使用される、pace.jsに競合をトレースします。

pace.min.jsBundleConfig.csにコメントアウトすると競合が解消されました。

今、彼らはpace.js方法を見つけ出すためにとファイルアップロードがサイド・バイ・サイド...

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でjquery.filedrop.jsを見てくださいデバッグウィンドウ。 XMLHttpRequestオブジェクトにカーソルを合わせると、pace.minの参照が表示されます。

enter image description here

関連する問題