Envoyer un fichier avec XmlHttpRequest: Streaming?

Je suis en train de télécharger de gros fichiers par glisser-déposer. J'ai ce morceau de code Javascript:

xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('X-File-Name', file.name);
xhr.setRequestHeader('X-File-Size', file.size);
xhr.setRequestHeader('Content-Type', file.type);
xhr.send(file);

où url est une chaîne de caractères de l'url cible et file est un Blob (selon http://www.w3.org/TR/XMLHttpRequest2/#the-send-method), que j'ai récupéré après un fichier de glisser-déposer. Ce code fonctionne dans Chrome 12, Safari 5 et Firefox 4 et envoie le contenu brut du fichier dans le corps de la requête HTTP.

Toutefois, si le fichier est assez gros de la demande n'est jamais envoyé. Au lieu de cela, le XMLHttpRequest objet d'incendies et de l'événement d'erreur (sans aucun message utile). Cette limite est 86Mb dans mon environnement, mais il varie d'une machine à l'autre.

La console javascript de Chrome affiche le message:

POST http://localhost/xfiles/xfiles.php undefined (undefined)

qui n'a rien à voir avec mon code (qui fonctionne parfaitement avec des fichiers plus petits).

Il semble que le navigateur lit tout le fichier en mémoire et avant de l'envoyer. Il y a probablement un souvenir d'exception ou quelque chose comme ça qui arrête le processus. En tout cas, il n'y pas de requête HTTP est envoyée, il est certain que le serveur limites n'ont rien à voir avec ce problème.

De toute façon, la lecture de tout fichier est un gaspillage de ressources.

Est il une méthode pour envoyer le fichier en streaming de la mode, octet par octet, sans avoir à les stocker dans la mémoire de la première?

source d'informationauteur linepogl

  1. 6

    Essayez d'utiliser le Blob.tranche méthode pour diviser le Blob en plusieurs morceaux, et de les envoyer chacun d'eux comme une demande distincte.

  2. 6

    Aujourd'hui, avec google chrome 31 (windows), xhr.envoyer(fichier) pas lire l'intégralité du fichier en mémoire. Le fait est, j'ai essayer de xhr.envoyer 100 mo de fichiers et de regarder le gestionnaire des tâches de google chrome à l'utilisation de la mémoire - il augmente seulement légèrement au cours de 100 mo de téléchargement de fichiers.

    Comme une note de côté, xhr.send(file) convient le mieux pour METTRE de télécharger, de publier plus approprié serait FormData:

      var formData = new FormData();
  formData.append("thefile", file);
  xhr.send(formData);

    À l'aide de FormData cependant, l'augmentation du temps de téléchargement de près de 50%, probablement en raison de l'encodage base64.

  3. 1

    Découvrez ce plugin jquery si vous êtes à l'aide de jquery
    http://github.com/valums/file-uploader

    Espère que cela aide.