jQuery AJAX Fileupload crossbrowser support

Question

Actualmente estoy trabajando en un script de carga de archivos AJAX, que funciona como un encanto en Firefox pero no funciona en IE.

este es el HTML básico que estoy usando:

<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"/> 

esta es la función 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(); 
} 

y finishedPostingFile() sería la función de llamada de vuelta una vez que el iframe ha terminado publicación /cargando.

Ahora, esto funciona como un encanto en Firefox pero no funciona en IE. Ya descubrí que IE necesita attr('encoding',...) en lugar de attr('enctype',...) y también lo intenté sin crear el formulario y el iframe sobre la marcha al escribir esos elementos como html simple, lo que realmente no hizo la diferencia.

IE (Internet Explorer 8, para ser concreto, no se han probado en < 8) no da un error y la animación de carga simplemente sigue girando, sin que el archivo que se está siempre cargado ... Alguien tiene alguna idea sobre cómo hacer que esto funcione?

Answer 1

¿Por qué no usar esto, http://valums.com/ajax-upload/?

O al menos consulte su código para ver la forma correcta de crear un formulario que funcione en todos los navegadores.

Answer 2

aquí está un ejemplo de trabajo para Firefox/IE7/IE8, actualmente estoy usando un diálogo jqueryUI para la barra de progreso.

basta con sustituir "DocumentUploadForm" con el ID de su forma

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

hth

Answer 3

supongo que su marco no se está anexa a DOM en el IE. Al menos si el HTML que ha publicado está completo. Como no contiene ningún div con id = fileUploadDiv

Puede confirmar esto agregando el iframe con ancho y alto distinto de cero y establezca el src en una URL correcta.

Answer 4

Gracias a todos.

Ahora uso el script desde http://www.uploadify.com.

gran guión con una gran cantidad de funciones personalizables ...

Answer 5

hice este cambio en la línea 10:

y funcionó

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

que estoy haciendo algo muy similar, lo tenía el problema de que solo IE8 no subía los archivos a mi servidor; tiene un IniSizeError.

Mi solución fue la adición de esta línea:

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

a mi forma cuando se creó. El atributo Enctype también es obligatorio.