6

我已經創建了一個新的多拖拽文件上傳控制進度條。它適用於所有瀏覽器,IE 10及以上版本除外。IE jquery異步文件上傳請求正在進行中

當我在IE瀏覽器上傳文件,最次的jQuery異步請求將無法完成。它顯示待處理。我可以看到它在IE網絡調試器窗口中處於待處理狀態。但在所有其他瀏覽器中,它運行良好。我無能爲力這裏有什麼問題。最初我認爲這可能與緩存有關。但是在服務器響應中添加以下參數後。它仍然進去待定狀態

context.Response.AppendHeader("Cache-Control", "no-cache"); // HTTP 1.1 
context.Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.1 

enter image description here enter image description here enter image description here

for (var i = 0; i < files.length; i++) { 
     var data = new FormData(); 
     data.append(files[i].name, files[i]); 
     uploadFile(handlerurl, data); 
    } 
function uploadFile(handlerurl, formData) { 
       var jqXHR = $.ajax({ 
        type: 'POST', 
        url: handlerurl, 
        contentType: false, 
        processData: false, 
        async: true, 
        cache: false, 
        data: formData,       
        xhr: function() { }, 
        success: function (result, status, xhr) { }, 
        error: function (xhr, status, error) { } 
      }); 
} 

我打電話,每個文件這一功能。我不確定IE有什麼問題。

編輯:調試後,發現該服務器斷點將打。但context.Request.Files中沒有文件。沒有文件從jquery/AJAX發送。 您可以通過一次又一次上傳相同的文件來重現此問題。

+0

類似的問題:http://stackoverflow.com/questions/16976079/jquery-file-upload-stuck-in-pending-state-with-ie10-zero-byte-file – sunder

+0

什麼版本的IE是你使用? –

+0

IE10及以上。 – sunder

回答

0

你嘗試傳遞的絕對URL爲handlerUrl?

如果你的代碼是寫在一個獨立的js文件,如果代碼被寫入HTML然後傳遞正確的相對URL將有助於絕對URL可以幫助別人。

0

IE不支持AJAX的文件上傳你想要的工作方式。最好的情況下,你可以提供一個Flash後備。

+0

我不確定這是否屬實。我可以看到它在我的測試項目中運行良好。 – sunder

1

問題

在尋找通過Ajax和不張貼整個窗體文件上傳選項中,我們經常使用FORMDATA的API,它適用於Chrome和Mozilla但不是在IE瀏覽器完全沒有碰到過的代碼在互聯網上。

解決方案

這樣的想法是對形式的目標指向一個iframe,甚至一個負載事件綁定到iframe中,讓你知道當上傳完成後,寫更多的jQuery函數。你甚至可以隱藏iframe而不顯示用戶。但是這個解決方案也適用於IE。代碼如下

代碼還說明了如何使用該文件後一起發佈的其他數據。

@{ 
    ViewBag.Title = "Index"; 
} 
<script src="~/scripts/jquery-1.9.1.min_.js"></script> 
<script type="text/javascript"> 
    function successFunction() { 
     alert($('#my_iframe').contents().find('p').html()); 
    } 
    function redirect() { 
     //debugger; 
     document.getElementById('my_form').target = 'my_iframe'; //'my_iframe' is the name of the iframe 
     //document.getElementById('my_form').submit(); 
     var callback = function() { 
      if (successFunction) 
       successFunction(); 
      $('#frame').unbind('load', callback); 
     }; 

     $('#my_iframe').bind('load', callback); 
     $('#hfParam').val('id:1'); 

     $('#my_form').submit(); 
     //$("#my_form").trigger("submit"); 

    } 
</script> 
<h2>Index</h2> 
<input type="button" name="action" value="Upload" onclick="redirect();"/> 
<form id="my_form" name="my_form" action="/FileUpload/UploadFile" method="POST" enctype="multipart/form-data" > 
    <div id="main"> 
     <input name="my_hidden" id="hfParam" type="hidden" /> 
     <input name="my_files" id="my_file" type="file" /> 
     <iframe id='my_iframe' name='my_iframe' src=""> 
     </iframe> 
     <div id="someDiv"></div> 
    </div> 

</form> 


[HttpPost] 
     public ActionResult UploadFile() 
     { 
      ContentResult result = new ContentResult() { Content = "<p></p>", ContentType = "text/html"}; 
      HttpPostedFileBase postedFile = Request.Files[0]; 
      try 
      { 
       result.Content = "<p>" + postedFile.FileName + "</p>"; 

      } 
      catch (System.Exception ex) 
      { 
       result.Content = ex.Message; 
      } 
      return result; 
     } 

來源:http://kaushikghosh12.blogspot.com/2014/02/ajax-fileupload-on-all-browsers.html

+0

如何使用iframe回發在progess欄中顯示上傳進度。 – sunder

0

可以箱的iframe,然後安裝並使用此iframe上傳你的圖片。它會簡單地發佈你的圖片,但看起來像你用ajax發佈的。

0

我們正在使用https://blueimp.github.io/jQuery-File-Upload/ 完美的IE瀏覽器,當然,當你到達IE8-9那麼你真的不能真正有Drag'n Drop完全或部分支持,但它的IE瀏覽器。

fileUpload.fileupload({ 
    autoUpload: false, 
    dataType: 'json', 
    url: url, 
    uploadTemplateId: null, 
    downloadTemplateId: null, 
    filesContainer: $('.x-table-uploaded-files tbody'), 
    uploadTemplate: function (o) { ... a.s.o 

最好的我曾經處理過的所有上傳者。(對不起,不完整的來源,工作着的份額多少:/)

[HttpPost] 
    public JsonResult Upload(IEnumerable<HttpPostedFileBase> files, int CId) 
    { 
     UploadResult result = cf.Handle(files, CId); 
     result.ErrorCount = result.files.Count; 
     if (result.files.Count > 100) 
     { 
      result.files = new List<FileErrorResults>(); 
     } 
     return Json(result, JsonRequestBehavior.AllowGet); 
    } 

這個例子是一個自動上傳的文件拖放解析器分析後吐出返回結果的實時,並給出文件的錯誤,而用戶正在拖動他的其他文件。支持IE10及以上,當然與IE8-9,你必須點擊並選擇文件,而不是拖放,但我想這是懲罰,他們正在使用IE瀏覽器。

但是我曾嘗試谷歌的解決方案爲亞,似乎有很多錯誤在IE隊列表中上傳懸而未決的問題,該文件在許多情況下只是卡住了。它是一個危險的平臺。