jQuery AJAX Fileupload crossbrowser支持

我目前正在研究一個AJAX文件上傳腳本，它在Firefox中像一個魅力一樣工作，但在IE中不起作用。jQuery AJAX Fileupload crossbrowser支持

這是我使用的基本HTML：

<form > 
    <input type="file" name="FileFields" id="FileFields"/> 
    <button type="button" onclick="uploadFile();" id="uploadButton">Upload</button> 
    <ul id="files"/> 
    ... other form elements ... 
</form> 

<div id="fileUploadDiv"/>

這是uploadFile功能：

function uploadFile() 
{ 
    //we don't want more then 5 files uploaded 
    if($('#files li').size() >= 5) 
    { 
     return; 
    } 
    //disable the upload button 
    $('#uploadButton').attr('disabled','disabled'); 
    //show loading animation 
    $('#files').append(
     $('<li>') 
      .attr('id','loading') 
      .append(
       $('<img>').attr('src','/images/loading.gif') 
      ) 
      .addClass('loading') 
    ); 

    //add all neccessary elements (the form and the iframe) 
    $('#fileUploadDiv').append(
     $('<form action="/uploadFile" method="post" id="fileUploadForm">') 
      .attr('enctype','multipart/form-data') 
      .attr('encoding', 'multipart/form-data') 
      .attr('target', 'upload_frame') 
      .append(
       $('#FileFields').clone() 
        .css('visibility','hidden') 
     ) 
     .append(
      $('<iframe>').attr('name','upload_frame') 
       .load(function(){finishedPostingFile();}) 
       .attr('id','upload_frame') 
       .attr('src','') 
       .css({ 
        'width':'0px', 
        'height':'0px', 
        'border':'0px none #fff' 
       }) 

     ) 
    ); 


    //start uploading the file 
    $('#fileUploadForm').submit(); 
}

和finishedPostingFile（）將回調函數，一旦iframe中已完成發佈/加載。

現在，這工作像在Firefox的魅力，但在IE中不起作用。我已經知道IE需要attr('encoding',...)而不是attr('enctype',...)，我也嘗試通過將這些元素編寫爲純HTML來創建表單和iframe，而這些元素並沒有真正起作用。（IE8，具體來說，沒有在< 8中測試過）沒有給出錯誤，加載動畫只是繼續旋轉，沒有文件被上傳... 任何人都有任何想法關於如何使這項工作？

來源

2010-01-21 Zenon

你有沒有得到一個很好的答案呢？ – camainc 2011-05-19 15:03:16

爲什麼不使用這個，http://valums.com/ajax-upload/？

或者至少看看他們的代碼，看看創建一個跨瀏覽器的表單的正確方法。

來源

2010-01-21 10:31:15

該腳本似乎不允許您將一個常規的'與一個單獨的按鈕結合使用來實際發送數據，而似乎只允許使用'input'發送在飛行中創建，這不是我想要的。主要是出於兼容性原因，如果用戶禁用JavaScript。但我會檢查源代碼，看他們是如何做到的，也許這會帶領我朝着正確的方向:) – Zenon 2010-01-21 10:44:34

到目前爲止，這比在這幾天讓我瘋狂的越野車plupload好得多 - 隱形框被創建出來 – 2011-09-09 03:03:28

上面的鏈接似乎已經死亡。我認爲這是正確的：https://github.com/Valums-File-Uploader/file-uploader – 2014-02-26 13:36:20

這裏是一個適用於Firefox/IE7/IE8的工作示例，我目前使用jqueryUI對話框作爲進度條。

只需更換「DocumentUploadForm」符合ID的形式

$(document).ready(function() { 
    $("#DocumentUploadForm").submit(function(data) { 
     data.preventDefault; 

     var submittingForm = $("#DocumentUploadForm"); 
     var frameName = ("Upload"); 
     var uploadFrame = $("<iframe name=\"" + frameName + "\" />"); 

     uploadFrame.css("display", "none"); 


     $(".document_upload_progress").dialog({ 
      autoOpen: true, 
      bgiframe: true, 
      resizable: false, 
      height: 150, 
      width: 350, 
      modal: true, 
      overlay: { 
       backgroundColor: '#000', 
       opacity: 0.5 
      }, 
      open: function() { 
       $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove(); 
      }, 
      close: function() { 
       $(".document_upload_progress").dialog("destroy"); 
      } 
     }); 


     uploadFrame.load(function(data) { 
      //submit complete 
      setTimeout(function() { uploadFrame.remove(); }, 100); 
      $('#document_upload_dialog').dialog('close'); 
     }); 

     $("body:first").append(uploadFrame); 

     //setup complete 
     submittingForm.attr("target", frameName); 
    }); 
});

心連心

來源

2010-01-21 10:49:23

我需要一個單獨的窗體來提交文件，與第一種形式的原始文件輸入，以及一切，再加上除了ajax上傳的東西之外的第二種形式。我試着用你提供的整個.submit（.....）函數，但它仍然不能在IE8中工作。 – Zenon 2010-01-21 12:43:52

的我猜你的框架是從來沒有得到追加到DOM在IE中。至少如果您發佈的HTML已完成。因爲它不包含id = fileUploadDiv的任何div

您可以通過添加具有非零寬度和高度的iframe來進行確認，並將src設置爲正確的URL。

來源

2010-01-21 11:04:54

感謝您指出，我調整它，以納入分區。在過去的3個小時嘗試不同的東西之後，我忘記了所有這些。 – Zenon 2010-01-21 11:11:12

此外，您正在將iframe附加到表單。它不覺得做正確的事情。嘗試將iframe直接添加到 – 2010-01-21 11:16:15

我將表單附加到窗體外部的div，但我會在正文中嘗試它 – Zenon 2010-01-21 12:12:40

感謝大家。

我現在使用http://www.uploadify.com的腳本。

了大量的定製功能大腳本...

來源

2012-01-15 12:43:56 Torben

我做了第10行這一變化：

和它的工作

if(window.ActiveXObject) { 
       var io; 


       try 
       { 
        //Your JavaScript code will be here, routine JavaScript statements area. 
        io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />'); 
       } 
       catch(err) 
       { 
        //JavaScript Errors handling code will be here 
        io=document.createElement("iframe"); 
        io.setAttribute("id",frameId); 
        io.setAttribute("name",frameId); 
       }

來源

2012-10-26 06:21:33

我做了非常類似的事情，我有問題，只是IE8沒有上傳文件到我的服務器;有一個IniSizeError。創建時

form.encoding = "multipart/form-data";

到我的表格：

我的溶液中加入這一行。 Enctype屬性也是必需的。

來源

2013-09-24 10:12:06

jQuery AJAX Fileupload crossbrowser支持

回答

相關問題