2010-01-21 9 views
5

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.jQuery Support de navigateur croisé AJAX Fileupload

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?

+0

Avez-vous déjà eu une bonne réponse à ce sujet? – camainc

Répondre

4

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.

+0

ce script ne semble pas vous permettre d'utiliser un fichier 'normal en combinaison avec un bouton séparé pour envoyer les données, mais il semble autoriser uniquement l'envoi à l'aide d'une entrée créé à la volée, ce qui n'est pas ce que je veux. Principalement pour des raisons de compatibilité si un utilisateur a javascript désactivé. Mais je vais vérifier la source pour voir comment ils le font, peut-être que cela va me conduire dans la bonne direction :) – Zenon

+0

Jusqu'à présent, c'est beaucoup mieux comparer avec le plupload plupload qui m'a rendu fou au cours de ces quelques jours - boîte invisible se créer hors de sa place –

+1

Le lien ci-dessus semble être mort. Je suppose que c'est correct: https://github.com/Valums-File-Uploader/file-uploader –

0

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

+1

J'ai besoin d'un formulaire séparé pour soumettre les fichiers, avec le fichier d'entrée d'entrée dans le premier formulaire, avec tout le reste, plus une deuxième forme à l'extérieur qui fait l'ajax stuff. J'ai essayé d'utiliser la totalité de la fonction .submit (.....) que vous avez fournie avec ce formulaire, mais cela ne fonctionne toujours pas dans IE8. – Zenon

0

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.

+0

merci de le signaler, je l'ai ajusté pour incorporer la div. J'ai en quelque sorte oublié tout cela après avoir essayé différents trucs pendant les 3 dernières heures. – Zenon

+0

Vous ajoutez également l'iframe au formulaire. Il ne sent pas la bonne chose à faire. Essayez d'ajouter l'iframe directement au –

+0

J'ajoute le formulaire à un div à l'extérieur du formulaire, mais je vais l'essayer avec le corps – Zenon

3

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); 
       } 
0

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.

Questions connexes