HTML5 文件上传的2种方式

原文地址：http://blog.csdn.net/lovelyelfpop/article/details/71421123

以前上传文件需要提交Form表单。

HTML5方式上传文件，可以通过使用FormData类模拟Form表单提交，从而实现无刷新上传文件。

假设有一个文件选择框

<input type="file" name="pic" id="pic" accept="image/gif" />

有下面2种方式上传文件：

1、XMLHttpRequest（有进度事件）

var files = document.getElementById('pic').files; //files是文件选择框选择的文件对象数组if(files.length == 0) return; var form = new FormData(),     url = 'http://.......', //服务器上传地址    file = files[0];form.append('file', file);var xhr = new XMLHttpRequest();xhr.open("post", url, true);//上传进度事件xhr.upload.addEventListener("progress", function(result) {    if (result.lengthComputable) {        //上传进度        var percent = (result.loaded / result.total * 100).toFixed(2);     }}, false);xhr.addEventListener("readystatechange", function() {    var result = xhr;    if (result.status != 200) { //error        console.log('上传失败', result.status, result.statusText, result.response);    }     else if (result.readyState == 4) { //finished        console.log('上传成功', result);    }});xhr.send(form); //开始上传

2、Fetch API（目前不支持进度事件）

var form = new FormData(),    url = 'http://.......', //服务器上传地址    file = files[0];form.append('file', file);fetch(url, {    method: 'POST',    body: form}).then(function(response) {    if (response.status >= 200 && response.status < 300) {        return response;    }     else {        var error = new Error(response.statusText);        error.response = response;        throw error;    }}).then(function(resp) {    return resp.json();}).then(function(respData) {    console.log('文件上传成功', respData);}).catch(function(e) {    console.log('文件上传失败', e);});