使用XHR请求发送文件

Question

if(up.xhr.sendAsBinary != null) { //firefox

    up.xhr.open('POST', '/html5_upload.php?up=true', true);

    var boundary = 'xxxxxxxxx';

    var body = '--' + boundary + "\r\n";  
    body += "Content-Disposition: form-data; name='upload'; filename='" + up.processing.name + "'\r\n";  
    body += "Content-Type: application/octet-stream\r\n\r\n";  
    body += binary + "\r\n";  
    body += '--' + boundary + '--';  

    up.xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
    up.xhr.sendAsBinary(body);          

} else { //for browsers that don't support sendAsBinary yet

    up.xhr.open('POST', '/html5_upload.php?up=true&base64=true', true);

    up.xhr.setRequestHeader('UP-FILENAME', up.processing.name);
    up.xhr.setRequestHeader('UP-SIZE', up.processing.size);
    up.xhr.setRequestHeader('UP-TYPE', up.processing.type);

    up.xhr.send(window.btoa(binary)); 
}

Hi I've copied this code from a website and I'm trying to understand hows it works. I'm wondering what's the difference between two methods of sending the file over to php. Is there any benfits in using one instead of the other?

Answer 1

The btoa function is described in the HTML5 spec . It appears not all browser have this method implemented.

Here is the source article for your example.

The 1st example (sendAsBinary) creates the form post data as defined in RFC 2388 .

The 2nd example (btoa) uses a custom payload (base64 encoded value of file contents).