文件上传五种方法对比

文件上传

这里参考阮一峰老师的博客，原文写于2012年，现在需要不断学习新东西。

早期不同文件上传浏览器兼容性不好。现在HTML5出现后有了统一的接口。

1、早期 form 表单同步上传

<form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >
	<input type="file" id="upload" name="upload" /><br />
	<input type="submit" value="Upload" />
</form>

这样界面不是很好，需要后端代码php进行接收。

早期的 form 上传是同步上传，点击上传后界面锁死，等待上传结束后，浏览器刷新到新的界面。

2、iframe 异步上传

点击提交按钮后，界面中插入 iframe

var form = $("#upload-form");
form.on('submit',function() {
  // 此处动态插入iframe元素
    var seed = Math.floor(Math.random() * 1000);
    var id = "uploader-frame-" + seed;
    var callback = "uploader-cb-" + seed;
    var iframe = $('<iframe id="'+id+'" name="'+id+'" style="display:none;">');
    var url = form.attr('action');
    form.attr('target', id).append(iframe).attr('action', url + '?iframe=' + callback);
});

最后一行，有两个地方值得注意。首先，它为表单添加target属性，指向动态插入的iframe窗口，这使得上传结束后，服务器将结果返回iframe窗口，所以当前页面就不会跳转了。其次，它在action属性指定的上传网址的后面，添加了一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从iframe窗口传到上层页面。

界面返回代码（php）这种情况可以处理不支持 H5 的旧浏览器

<script type="text/javascript">
  window.top.window['callback'](data);
  
  window[callback] = function(data){
    console.log('received callback:', data);
    iframe.remove();
    //removing iframe
    form.removeAttr('target');
    form.attr('action', url);
    window[callback] = undefined;
    //removing callback
  };
</script>

3、Ajax 异步上传

使用 form-data 进行文件上传

// 检查是否支持FormData
if(window.FormData) {　
  var formData = new FormData();
  
  // 建立一个upload表单项，值为上传的文件
  formData.append('upload', document.getElementById('upload').files[0]);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', $(this).attr('action'));
  
  // 定义上传完成后的回调函数
  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log('上传成功');
    } else {
      console.log('出错了');
    }
  };
  xhr.send(formData);
}

现在用这个方法测试文件上传

关键问题：这个请求是ajax请求，需要异步上传，所以在请求头需要设置，表示 ajax 请求。

form.getHeaders = function() {
  return {'X-Requested-With': 'XMLHttpRequest'};
}

不同的后端需要加入不同的前缀。例如项目的后端对于ajax 请求，在请求头中必须加入对应的说明。

4、Progress 进度条上传

<progress id="uploadprogress" min="0" max="100" value="0">0</progress>

xhr.upload.onprogress = function(e) {
  if (e.lengthCompatable) {
    let complate = (e.loaded / e.total * 100 | 0);
    let progress = document.getElementById('uploadprogress');
    progress.value = progress.innerHTML = complete;
  }
};
//注意 需要绑定的是 xhr.upload 的 onprogress 事件，不是 xhr 的事件

5、图片上传预览

// 检查是否支持FileReader对象
　　if (typeof FileReader != 'undefined') {

　　　　var acceptedTypes = {
　　　　　　'image/png': true,
　　　　　　'image/jpeg': true,
　　　　　　'image/gif': true
　　　　};

　　　　if (acceptedTypes[document.getElementById('upload').files[0].type] === true) {

　　　　　　var reader = new FileReader();

　　　　　　reader.onload = function (event) {
　　　　　　　　var image = new Image();
　　　　　　　　image.src = event.target.result;
　　　　　　　　image.width = 100;
　　　　　　　　document.body.appendChild(image);
　　　　　　};
　　　　reader.readAsDataURL(document.getElementById('upload').files[0]);
　　　　}
　　}

6、拖拽上传

// 检查浏览器是否支持拖放上传。
if('draggable' in document.createElement('span')){
  var holder = document.getElementById('holder');
  
  holder.ondragover = function () {
    this.className = 'hover';
    return false;
  };
  
  holder.ondragend = function () {
    this.className = '';
    return false;
  };
  
  holder.ondrop = function (event) {
    event.preventDefault();
    this.className = '';
    var files = event.dataTransfer.files;
    // do something with files
  };
}

<div id="holder"></div>

　　#holder {
　　　　border: 10px dashed #ccc;
　　　　width: 300px;
　　　　min-height: 300px;
　　　　margin: 20px auto;
　　}

　　#holder.hover {
　　　　border: 10px dashed #0c0;
　　}