使用原生js上传文件

2018-8-28

使用浏览器的formData对象和XMLHttpRequest对象就可以了……

今天好懒…都不想打字。

当我们想要上传文件的时候，先显示一个loading：

javascript

_this.showLoading('上传文件中');

然后定义一个formData对象：

javascript

var form = new FormData();

使用 form.append() 方法，把该放的字段都放进去，最后去拿文件。

拿文件才是重点。

首先我们需要一个萌萌的input file标签

html

<input accept=".xls,.xlsx"  type="file" name="inputFile" style="display: none;" id="inputFile" value="" />

然后怎样去拿文件内容呢？

javascript

var files = document.getElementById('inputFile').files[0];

把这个文件的数据放到formData对象里

javascript

form.append('file',files);

要传的数据准备好了，再准备一个ajax对象。

javascript

xhr = new XMLHttpRequest();

打开这个链接

javascript

xhr.open("post", url, true);

给这个对象写几个回调，分别是成功、失败。回调还有很多，百度能搜到。

javascript

xhr.onload = function(res){

    //这个值就是ajax返回的数据

    var xxx = res.currentTarget.response;   

}

javascript

xhr.onerror = function(){

    alert('上传失败');

}

都设置好了，就可以发送了。

javascript

xhr.send(form);

如果发送成功，就会进入回调onload，如果发送失败，就会进入onerror。JQuery和mui的ajax都是基于这种方式来进行封装的。

发送成功后后端就会接受到文件了。以后端的尿性（机制），接收到的文件信息会以一个数组的方式呈现。同时文件会被php缓存到一个特殊的地方，并把这个临时文件的地址存放在这个数组中。我们只需要这样便可以拿到这个文件：

php

$file = $_FILES;

$filename = $file['file']['tmp_name'];

今天的需求是上传一个excel文件，然后使用PHPExcel插件来解析内容。那么到此为止，我就可以将filename当成一个文件名交给PHPExcel来进行相关处理了。

跟Excel相关的内容以后再更。

下班了，溜了。

使用原生js上传文件 ​