HTML5 文件上传的两种方式

以前上传文件需要提交Form表单。
HTML5方式上传文件，可以通过使用FormData类模拟Form表单提交，从而实现无刷新上传文件。
假设有一个文件选择框

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

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

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);
  
• });