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

télécharger des fichiers est en fait possible avec AJAX ces jours-ci. Oui, AJAX, pas des connards D'AJAX comme swf ou java.

cet exemple pourrait vous aider: https://webblocks.nl/tests/ajax/file-drag-drop.html

(il inclut également l'interface glisser/déposer, mais qui est facilement ignoré.)

au fond, ce qui se résume est ceci:

<input id="files" type="file" />

<script>
document.getElementById('files').addEventListener('change', function(e) {
    var file = this.files[0];
    var xhr = new XMLHttpRequest();
    (xhr.upload || xhr).addEventListener('progress', function(e) {
        var done = e.position || e.loaded
        var total = e.totalSize || e.total;
        console.log('xhr progress: ' + Math.round(done/total*100) + '%');
    });
    xhr.addEventListener('load', function(e) {
        console.log('xhr upload complete', e, this.responseText);
    });
    xhr.open('post', '/URL-HERE', true);
    xhr.send(file);
});
</script>

(démo: http://jsfiddle.net/rudiedirkx/jzxmro8r / )

donc fondamentalement ce qu'il se résume à est ceci =)

xhr.send(file);

où file est le type de Blob : http://www.w3.org/TR/FileAPI /

une autre (meilleure IMO) façon est d'utiliser FormData . Cela vous permet 1) de nommer un fichier, comme dans un formulaire et 2) d'envoyer d'autres choses (fichiers aussi), 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 code serveur plus propre et plus compatible en amont (puisque la requête a maintenant le même format exact que les formes normales).

Tout cela n'est pas expérimental, mais très moderne. Chrome 8+ et Firefox 4+ savent quoi faire, mais je ne sais rien d'autre.

C'est ainsi que j'ai traité la requête (1 image par requête) 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;
}