jQuery de Progression de Téléchargement et upload de fichier en AJAX

Question

Il me semble que je n'ai pas communiqué clairement mon problème. J'ai besoin d'envoyer un fichier (à l'aide d'AJAX) et j'ai besoin d'obtenir de l'avancement du téléchargement de fichier à l'aide de la Nginx HttpUploadProgressModule. J'ai besoin d'une bonne solution à ce problème. J'ai essayé avec le jquery.uploadprogress plugin, mais je viens de trouver moi-même d'avoir à réécrire beaucoup de lui pour qu'il fonctionne dans tous les navigateurs et pour envoyer le fichier à l'aide d'AJAX.

Tout ce que je besoin est le code pour faire cela, et il doit fonctionner dans tous les principaux navigateurs (Chrome, Safari, FireFox et IE). Il serait encore mieux Si je pouvais trouver une solution qui permettra de gérer plusieurs téléchargements de fichiers.

J'utilise le jquery.uploadprogress plugin pour obtenir de l'avancement du téléchargement d'un fichier à partir de la NginxHttpUploadProgressModule. C'est à l'intérieur d'une iframe pour un facebook de l'application. Il fonctionne dans firefox, mais il échoue dans chrome/safari.

Quand j'ai ouvert la console, j'obtiens cette.

Uncaught ReferenceError: progressFrame is not defined
jquery.uploadprogress.js:80

Une idée de comment je pourrais résoudre ce problème?

Je voudrais aussi envoyer le fichier à l'aide d'AJAX quand il est terminé. Comment pourrais-je mettre en œuvre?

EDIT:
J'ai besoin de cette bientôt et il est important donc je vais mettre un de 100 points de récompense sur cette question. La première personne à répondre, il recevra 100 points.

EDIT 2:
Jake33 m'a aidé à résoudre le premier problème. La première personne à laisser une réponse à comment envoyer le fichier avec l'ajax trop recevrez 100 points.

Answer 1

Le téléchargement des fichiers est possible avec l'AJAX ces jours-ci. Oui, AJAX, pas certains de merde AJAX aspirants comme swf ou java.

Cet exemple peut vous aider: http://js1.hotblocks.nl/tests/ajax/file-drag-drop.html

(Il comprend également le glisser/déposer de l'interface, mais c'est facilement ignorée.)

Essentiellement, ce qu'il revient à ceci:

<input id=files type=file>

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    xhr.file = file; // not necessary if you create scopes like this
    xhr.addEventListener('progress', function(e) {
        var done = e.position || e.loaded, total = e.totalSize || e.total;
        console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
    }, false);
    if ( xhr.upload ) {
        xhr.upload.onprogress = function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
        };
    }
    xhr.onreadystatechange = function(e) {
        if ( 4 == this.readyState ) {
            console.log(['xhr upload complete', e]);
        }
    };
    xhr.open('post', url, true);
    xhr.send(file);
}, false);
</script>

Donc, fondamentalement, ce que c'est ça =)

xhr.send(file);

Où file est typeof Blob: http://www.w3.org/TR/FileAPI/

Un autre (mieux IMO) est d'utiliser FormData. Cela vous permet d'1) le nom d'un fichier, comme dans un formulaire et 2) envoyer d'autres trucs (fichiers trop), comme dans un formulaire.

var fd = new FormData;
fd.append('photo1', file);
fd.append('photo2', file2);
fd.append('other_data', 'foo bar');
xhr.send(fd);

FormData rend le serveur de code plus propre et plus compatible (depuis la demande maintenant a exactement le même format que les formes normales).

Tout cela n'est pas expérimental, mais très moderne. Chrome 8+, Firefox 4+ savoir quoi faire, mais je ne sais pas à propos des autres.

C'est de cette façon que j'ai manipulé la demande (1 image par demande) en PHP:

if ( isset($_FILES['file']) ) {
    $filename = basename($_FILES['file']['name']);
    $error = true;

    // Only upload if on my home win dev machine
    if ( isset($_SERVER['WINDIR']) ) {
        $path = 'uploads/'.$filename;
        $error = !move_uploaded_file($_FILES['file']['tmp_name'], $path);
    }

    $rsp = array(
        'error' => $error, // Used in JS
        'filename' => $filename,
        'filepath' => '/tests/uploads/' . $filename, // Web accessible
    );
    echo json_encode($rsp);
    exit;
}

Answer 2

Voici quelques options pour l'utilisation d'AJAX pour charger les fichiers:

• AjaxFileUpload - Nécessite un élément de formulaire sur la page, mais télécharge le fichier sans avoir à recharger la page. Voir la Démo.

• Liste de Plugins JQuery Tagged Avec "Fichier"

• Uploadify - Un Flash de la méthode de téléchargement de fichiers.

• Comment puis-je télécharger des fichiers de manière asynchrone avec jQuery?

• Dix Exemples de AJAX Upload de Fichier - Ce qui a été publié cette année.

Mise à JOUR: Voici un plug-in JQuery pour Plusieurs du Téléchargement du Fichier.

Answer 3

HTML5, AJAX Alimenté Télécharger

D'autres AJAX Méthodes de Téléchargement

Answer 4

Peut-être la mienne n'est pas la meilleure réponse, mais je viens d'essayer de vous aider ici.

Après avoir fait un flash sur google j'ai trouvé ce site http://nixboxdesigns.com/demos/jquery-uploadprogress.php qui ressemblent à de prometteuses pour résoudre votre problème. Il peut gérer de multiples télécharger et bien sûr sa ne ajax upload trop.

Mes conseils ici est juste d'essayer la démo http://nixboxdesigns.com/demos/jquery-uploadprogress-demo.php la première utilisation de l'intégralité de votre propre navigateur. Si le résultat est parfait alors travailler avec ce plugin peut-être résoudre votre problème sur la compatibilité du navigateur.

Answer 5

KrystalWare de SlickUpload est un très facile à utiliser la solution à votre problème: http://krystalware.com/Products/SlickUpload/ . Leur site web contient une documentation complète et des exemples.