Send filer med XHR og jQuery (HTML5-opplasting)

Jeg jobbet på i flere timer for å finne ut hvordan man kan bruke jQuery sitt $.ajax()-kall til å sende filer ved hjelp av nyere HTML5-«standarder», som for eksempel drag/drop-eventene og File-, FileReader- og FormData-klassene.

Det kan godt hende det bare er meg, men jeg slet hardt og godt med å finne ut hvordan jeg kunne bruke jQuery sitt $.ajax()-kall for å sende filer, da ved hjelp av siste nytt i HTML5, nemlig drag/drop-eventene og File/FileReader/FormData-klassene.

Kort fortalt: $.ajax() må settes til å ikke prosessere dataene, ei heller sette content-type i HTTP-forespørselen.

$.ajax({
    'url': 'upload.php',
    'type': 'post',
    'data': ,
    'processData': false,
    'contentType': false,
    'success': function(data) {
        // do stuff
    }
});

I tillegg vil man ofte legge til et opplastingsbarometer eller lignende, noe som krever at man fester en metode til «onprogress»-eventen til XMLHttpRequest-objektet. Med jQuery er ikke det bare-bare, men $.ajax() har en mulighet for å overstyre dets xhr-objekt. For eksempel:

$.ajax({
    'url': 'upload.php',
    'type': 'post',
    'data': fd,
    'processData': false,
    'contentType': false,
    'xhr': function(e) {
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.addEventListener('progress', this.progress);

        return xhr;
    },
    'progress': function(e) {
        // upload bar stuff here
    },
    'success': function(data) {
         // success code!
    }
});

I akkurat det eksempelet, setter den this.progress som callback, noe som gjør at vi kan sette «progress» i selve config-objektet til $.ajax(). Du kan likegodt ha en lambda-funksjon der. Eventuelt kan du sette opp slik at alle $.ajax()-kall vil ha støtte for progress ved å bruke $.ajaxSetup().