文件上传

统计信息：字数 6134 阅读13分钟

这里参考阮一峰老师的博客，原文写于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;
}

FormData 对象

FormData 对象把数据转化成键值对的形式进行传递，以便使用 XMLHTTPRequest 进行异步发送请求。

处理上传的文件

var formData = new FormData();

formData.append("userName", "Michale");
formData.append("accountnumber", 100);
// 注意：100 将被转化为字符串进行处理

// 点击按钮上传文件
btn.click = function(){
  let dom = document.getElementById('file-input');
    formData.append('userfile', dom.files[0]);
}

var content = '<a id="a"></a>';
var blob = new Blob([content], {type: 'text/xml'});
formData.append('webmasterfile', blob);

var request = new XMLHttpRequest();
request.open("POST", "http://www.sina.com/submit.php");
request.send(formData);
// send request
// 在添加的文件中，如果不是 File Blob 对象，就会转化成字符串
// 一个 Blob对象表示一个不可变的, 原始数据的类似文件对象。
//  File 接口基于Blob，继承 blob功能并将其扩展为支持用户系统上的文件。

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript" charset="utf-8" async defer>
    var form = new FormData();
    form.append("head", "string");
    console.log(form);
    console.log(form.get('head'));
  </script>
</body>
</html>

---

Last update: November 9, 2024