jQuery Support de navigateur croisé AJAX Fileupload

Question

Je travaille actuellement sur un script de téléchargement de fichier AJAX, qui fonctionne comme un charme dans Firefox mais ne fonctionne pas dans IE.

c'est le HTML de base que je utilise:

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

c'est la fonction 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(); 
} 

et finishedPostingFile() serait la fonction de rappel une fois que l'iframe a terminé l'affichage /chargement. Maintenant, cela fonctionne comme un charme dans Firefox mais ne fonctionne pas dans Internet Explorer. Je ai déjà compris que IE a besoin de attr('encoding',...) au lieu de attr('enctype',...) et je l'ai également essayé sans créer le formulaire et iframe à la volée en écrivant ces éléments en tant que html simple, ce qui n'a pas vraiment fait de différence.

IE (IE8, pour être concret, il n'a pas testé dans < 8) ne donne pas une erreur et l'animation de chargement ne cesse de filer, sans jamais le fichier en cours de téléchargement ... Quelqu'un at-il une idée sur comment faire ce travail?

Answer 1

Pourquoi ne pas l'utiliser, http://valums.com/ajax-upload/?

Ou au moins regarder leur code pour voir la bonne façon de créer un formulaire qui fonctionnera par navigateur.

Answer 2

Voici un exemple de travail pour Firefox/IE7/IE8, j'utilise actuellement une boîte de dialogue jqueryUI pour la barre de progression.

vient remplacer "DocumentUploadForm" avec l'identifiant de votre formulaire

$(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

Je suppose que votre cadre est jamais se joint en annexe au DOM dans IE. Au moins si le code HTML que vous avez posté est complet. Comme il ne contient aucune div avec id = fileUploadDiv

Vous pouvez confirmer cela en ajoutant l'iframe avec une largeur et une hauteur non nulles et définir le src à une URL correcte.

Answer 4

Merci à tous. J'utilise maintenant le script http://www.uploadify.com.

scénario super avec beaucoup de fonctions personnalisables ...

Answer 5

Je l'ai fait ce changement à la ligne 10:

et cela a fonctionné

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

Je suis en train de faire quelque chose de très semblable, je eu le problème que juste IE8 n'a pas téléchargé les fichiers sur mon serveur; eu un IniSizeError.

Ma solution a été ajouté cette ligne:

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

à ma forme lors de sa création. L'attribut Enctype est également requis.