Поддержка jQuery AJAX для поддержки кроссбраузера

Question

В настоящее время я работаю над сценарием загрузки файлов AJAX, который работает как шарм в Firefox, но не работает в IE.

это основной 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',...), и я также попробовал его, не создавая форму и iframe на лету, написав эти элементы как простой html, что на самом деле не изменило ситуацию.

IE (IE8, чтобы быть конкретным, не проверял его в < 8) не дает ошибки, и анимация загрузки просто продолжает вращаться, без файла, который когда-либо загружается ... У кого-нибудь есть идея о том, как сделать эту работу?

Answer 1

Почему бы не использовать это, http://valums.com/ajax-upload/?

Или, по крайней мере, посмотрите на их код, чтобы увидеть правильный способ создания формы, которая будет работать в кросс-браузере.

Answer 2

вот рабочий пример для Firefox/IE7/IE8, в настоящее время я использую диалог jqueryUI для панели прогресса.

просто заменить «DocumentUploadForm» с удостоверением вашей формы

$(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); 
    }); 
}); 

НТН

Answer 3

Я предполагаю, что ваш кадр никогда не получать добавляется к DOM в IE. По крайней мере, если HTML, который вы опубликовали, завершен. Поскольку он не содержит div с id = fileUploadDiv

Вы можете подтвердить это, добавив iframe с ненулевой шириной и высотой и установите src в правильный URL.

Answer 4

Спасибо всем.

Теперь я использую сценарий от http://www.uploadify.com.

Отличный сценарий с множеством настраиваемых функций ...

Answer 5

Я сделал это изменение в строке 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); 
       } 

Answer 6

Я делаю очень похожую вещь, я возникла проблема, что только IE8 не загружал файлы на мой сервер; получил IniSizeError.

Мой раствор, добавив следующую строку:

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

к моей форме при создании. Атрибут Enctype также требуется.