2013-01-14 13 views
13

Sto scrivendo una piccola applicazione JavaScript che mi permette di caricare le immagini in modo asincrono.L'oggetto FormData è disponibile in Internet Explorer 10?

Questo script funziona impressionante in tutti i browser tranne che per, indovinate chi, Internet Explorer ...

Quindi la prima cosa che ho fatto è quello di creare un ripiego per IE9- versioni con AjaxForm Plugin per jQuery, che funziona grande!

Ecco lo script JS.

$("#Uploader").change(function(e){ 
     var form = $("#UploaderForm"); 
     form.trigger('submit'); 
     $(this).attr('disabled','disabled'); 
     e.preventDefault(); 
}); 
$("#UploaderForm").submit(function(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     var type="POST";var loading=$("#PhotoIsLoading"); 
     if(windowApi === true){ 
      var formData = new FormData($(this)[0]); 
      $.ajax({ 
       url: url, 
       type: type, 
       xhr: function() { 
        myXhr = $.ajaxSettings.xhr(); 
        if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false);} 
        return myXhr; 
       }, 
       beforeSend: function(){loading.removeClass('isHidden_important');}, 
       success: function(response){ 
        jres = JSON.parse(response); 
        alert("Test ok, file uploaded"); 
       }, 
       error: function(response){console.warn(response);}, 
       data: formData, 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 
      e.preventDefault(); 
     }else{ 
      $(this).ajaxSubmit({ 
       url: url, 
       dataType: 'json', 
       type: type, 
       beforeSubmit: function(){loading.removeClass('isHidden_important');$(this).formSerialize();}, 
       success:function(response){ 
        jres = JSON.parse(response); 
        alert("FallbackTest Complete"); 
       }, 
       error: function(response){console.warn(response);}, 
      }); 
      e.preventDefault(); 
      return false; 
     } 
    }); 

WindowApi ed ogni altra variabile sono definite in uno script globale, ma non preoccupatevi, lavorano. Per essere precisi, WindowApi è questa:

var windowApi=true; 
if(window.File&&window.FileReader&&window.FileList&&window.Blob){ 
console.log("window.api ready");windowApi=true;} 
else{console.log("window.api not ready");windowApi=false;}; 

Così, con questo gruppo di righe di codice che gestire ogni browser e browser IE9- ...

Il problema ora è con IE10, perché ha tutto i metodi window.* e può utilizzare l'oggetto FormData. Ma quando provo a caricare qualcosa con IE10 e FormData ricevo un errore "Accesso negato" per l'oggetto formData.

Il codice HTML che viene coinvolgere in questo processo è:

<form name="UploaderForm" id="UploaderForm" method="post" enctype="multipart/form-data"> 
    <input type="file" name="Uploader" id="Uploader" accept="image/*" tabindex="1" /> 
</form> 

Così, alla fine la mia domanda è:

Come posso evitare di ottenere un "Accesso negato" eccezione in IE10 quando si cerca di accedere l'oggetto FormData?

risposta

7

https://stackoverflow.com/a/13657047/641293 e https://stackoverflow.com/a/4335390/641293 potrebbero essere utili. IE è abbastanza rigido su ciò che è possibile fare con <input type='file'> a livello di programmazione.

Sulla base del primo, si modifica la prima riga in questa correzione?

$("#Uploader").on('click', function(e){ /* rest of the function unchanged... */ 
+0

Questa soluzione è perfetta per IE10, ma ho ancora alcuni problemi con IE9- ma penso' ve trovare un'altra soluzione invece di "FormData Obj" –

1

Si ottiene un accesso negato quando si invia un modulo con campi che sono stati modificati da javascript. Hai aggiunto dinamicamente l'attributo disabled sul campo di caricamento, che potrebbe essere il motivo per cui ricevi uno Access denied. Forse dovresti fare un tentativo senza disabilitare il campo sull'evento change?

Tra l'altro, si potrebbe essere meglio controllare la disponibilità di FormData in combinazione con il File API:

var formDataSupport = false; 
if (typeof FormData === 'function' && 
    window.File && 
    window.FileReader && 
    window.FileList && 
    window.Blob) 
{ 
    console.log("File API available, formData available"); 
    formDataSupport = true; 
} 
+0

Questo è ok per un controllo precedente ma ho bisogno di qualcosa per prevenire l'errore in IE10 @Alex ha scritto la soluzione giusta. Comunque comunque +1 –

Problemi correlati