Caricamento chunk HTML5 non funzionante in Chrome 25?

Ho il seguente codice per caricare un'immagine nel blocco utilizzando Html5.Caricamento chunk HTML5 non funzionante in Chrome 25?

<!DOCTYPE html> 
<form> 
<div class="example"> 
    #bytes/chunk: 
    <input id="numChunks" value="1048576" /> 
    <input id="files" class="button" type="file" /> 
    <div id="bars"> 
     <span id="numofchunks">Num of chunks: </span> 
     <br /> 
     <span id="message"></span> 
    </div> 
</div> 
</form> 
<script src="~/Scripts/jquery-1.7.1.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     document.querySelector('input[type="file"]').addEventListener('change', function (e) { 
      var blob = this.files[0]; 

      var BYTES_PER_CHUNK = (1024 * 1024)/2; // 1MB chunk sizes. 
      var SIZE = blob.size; 
      $('#numofchunks').text($('#numofchunks').text() + SIZE/BYTES_PER_CHUNK); 
      var start = 10; 
      var end = BYTES_PER_CHUNK; 
      var counter = 1; 
      while (start < SIZE) { 
       upload(blob.slice(start, end), counter); 

       start = end; 
       end = start + BYTES_PER_CHUNK; 
       counter = counter + 1; 
      } 
     }, false); 

    }); 

     function upload(blobOrFile, counter) { 
      var xhr = new XMLHttpRequest(); 
      xhr.open('POST', '/basic/html5', true); 
      xhr.setRequestHeader("Content-Type", "image/jpeg"); 
      //   xhr.setRequestHeader("X-File-Name", blobOrFile.fileName); 
      xhr.onload = function() { $('#message').text($('#message').text() + counter + " ") }; 

      var fd = new FormData(); 
      fd.append("fileToUpload", blobOrFile); 
      xhr.send(fd); 
     }; 


</script>

Questo funziona in tutti i browser ma non funziona nel mio Chrome. In Chrome non ricevo la richiesta sul server. Nel monitoraggio della rete di Chrome mostra sempre la richiesta come In sospeso.

UPDATE: Non riesco a caricare un file di grandi dimensioni (più di 1mb). Non importa che lo faccia o no o la dimensione del pezzo. Se la dimensione dell'immagine è superiore a 1mb, non viene caricata.

prega di consultare la screenshot allegato dell'errore enter image description here

fonte

2013-03-25 Rana

Vale la pena notare che 'this.files [0]' non funzionerà in versioni di IE inferiori a 10. –

Cosa succede se si passa l'intero file? –

@James: Grazie, sei corretto per IE. Ma stiamo cercando di risolvere il problema di Chrome. – Rana

Prova questa

function(){ 
      var blobs = []; 

/* 
* function that uploads a fragment of the file 
*/ 
     function uploadChunk(blob, fileName, fileType){ 

      var xhr = new XMLHttpRequest(); 

      xhr.open('POST', 'upload_chunks.cfm', false); 

      xhr.onload = function(e){ 
       document.getElementById("messages").innerHTML += "Chunk of size " + blob.size + " uploaded successfully.<br/>"; 
      } 

      xhr.setRequestHeader('X_FILE_NAME', fileName); 
      xhr.setRequestHeader('Content-Type', fileType) 
      document.getElementById("messages").innerHTML += "Uploading chunk of size " + blob.size + ".<br/>"; 
      xhr.send(blob); 
     } 

/* 
* Invoke this function when the file is selected. 
*/ 
     document.querySelector('#userfile').addEventListener('change', function(){ 
      var file = this.files[0]; 
      var bytes_per_chunk = 1024 * 1024; 
      var start = 0; 
      var end = bytes_per_chunk; 
      var size = file.size; 

      while (start < size) { 
    //push the fragments to an array 
       blobs.push(file.slice(start, end)); 
       start = end; 
       end = start + bytes_per_chunk; 
      } 

    //upload the fragment to the server 
      while (blob = blobs.shift()) { 
    uploadChunk(blob, file.name, file.type); 
      } 
     }) 
    })();

Da http://www.sagarganatra.com/

fonte

2013-04-15 15:18:31

Grazie mille, ho provato il tuo codice e sta dando questo errore: Unchaught Errore: NETWORK_ERR: XMLHttpRequest Exception 101 Html5: 71 uploadChunk HTML5: 71 (funzione anonima), dal primo blocco – Rana

Ecco un altro possibile soluzione

https://github.com/tbela99/uploadManager/tree/master/Source

Il credito va a Thierry Bela

fonte

2013-04-16 16:32:30

Caricamento chunk HTML5 non funzionante in Chrome 25?

risposta

Problemi correlati