利用FormData对象实现AJAX文件上传功能及后端实现

包括HTML基础设置、CSS界面优化、JS利用FormData对象和AJAX进行上传、后端接收文件并存储到指定路径以及删除文件操做。

FE

HTML

基础的设置：

<form enctype="multipart/form-data">
  <input id="file" type="file" multiple="multiple" name="file" accept="...">
  <input type="submit" value="上传">
</form>
复制代码

Form的enctype属性

enctype这个属性管理的是表单的MIME编码，它一共有三个属性：

值	描述
application/x-www-form-urlencoded	在发送前编码全部字符（默认）
multipart/form-data	不对字符编码，用来制定传输数据的特殊类型，如mp三、jpg
text/plain	纯文本传输

所以，传输完整的文件数据须要multipart/form-data属性。

Input

value

保存了用户指定的文件的名称。

type="file"

设置input类型为file。

multiple="multiple"

可多选，不设置为单选。

accept="..."

设置可选文件的MIME_type。在设置以后点击选择文件按钮会默认显示符合设置的MIME_type的文件（存在兼容性）。具体的文件类型对应的MIME类型能够搜索到，这里列出我用到的类型：

文件类型	MIME类型
.txt	text/plain
.pdf	application/pdf
.doc	application/msword
.docx	application/vnd.openxmlformats-officedocument.wordprocessingml.document
.xls	application/vnd.ms-excel
.ppt	application/vnd.ms-powerpoint
.pptx	application/vnd.openxmlformats-officedocument.presentationml.presentation

效果

太丑，不能忍...

CSS

默认界面会在选择文件按钮后会跟一个显示文件名的文本区域，选择文件按钮没法编辑。 我修改的方法是将input框隐藏，再设置一个lable标签使用户点击lable标签时触发选择文件按钮。

<label for="file">选择文件</label>
复制代码

效果

JS

在使用from提交时，浏览器会向服务器发送选中的文件的内容而不单单是发送文件名。

为安全起见，<input type="file">即file-upload 元素不容许 HTML 做者或 JavaScript 程序员指定一个默认的文件名。HTML value 属性被忽略，而且对于此类元素来讲，value属性是只读的，这意味着只有用户能够输入一个文件名。当用户选择或编辑一个文件名时，file-upload 元素触发 onchange 事件句柄。

利用form提交会致使页面刷新，体验很差，因此使用AJAX进行文件上传是个不错的选择。但这须要咱们本身来组织经过POST请求发送的内容。

FormData对象

经过FormData对象能够组装一组用 XMLHttpRequest发送请求的键/值对。它能够更灵活方便的发送表单数据，由于能够独立于表单使用。若是你把表单的编码类型设置为multipart/form-data ，则经过FormData传输的数据格式和表单经过submit() 方法传输的数据格式相同。 —— MDN web docs

建立FormData对象

let formData = new FormData();
复制代码

向实例化对象中添加文件字段

let myFile = document.getElementById('file');
// myFile.file[0]为第一个文件（单选）,多个文件（多选）则要循环添加
formData.append('myFile', myFile.files[0]);
复制代码

console.log(myFile.files[0]);
复制代码

其中size属性单位是byte（字节），即b。

添加自定义字段

formData.append('username', 'simmzl');
复制代码

AJAX发送

let request = new XMLHttpRequest();
request.open("POST", "http://foo.com/foo.php");
request.send(formData);
复制代码

不使用FromData对象

不使用FormData对象的状况下，须要经过AJAX序列化和提交表单 ： Using nothing but XMLHttpRequest

PHP

接收

全局数组 $_FILES，第一个参数是表单的 input name，第二个下标是 "name", "type", "size", "tmp_name" 或 "error"。能够根据这些属性作相关限制，如限制文件大小、文件类型等。

值	描述
name	文件名
type	文件的MIME类型
size	以字节Byte为单位的文件大小
tmp_name	PHP接收文件会存为暂时文件，如需保存到指定路径还要移动这个暂时文件才能够
error	1-7表明7种不一样错误类别以及0表明成功

error： 成功：0(UPLOAD_ERR_OK) 失败：

1. 超过了配置文件上传文件的大小
2. 超过了表单设置上传文件的大小
3. 文件部分被上传
4. 没有文件被上传
5. 没有找到临时目录
6. 文件不可写
7. 因为PHP的扩展程序中断了文件上传

验证

上传文件是经过POST发送的，is_uploaded_file(file)函数能够判断指定的文件是不是经过 HTTP POST 上传的，返回布尔值。

该函数能够用于确保恶意的用户没法欺骗脚本去访问本不能访问的文件，例如 /etc/passwd。 这种检查显得格外重要，若是上传的文件有可能会形成对用户或本系统的其余用户显示其内容的话。

保存

上传的文件暂存在tmp_name中，须要使用move_uploaded_file(file,newlocation)将上传的文件移动到指定路径，返回布尔值。

if( move_uploaded_file($tmp_name, $destination) ) {
  echo "文件上传成功";
}else{
  echo "文件移动失败";
}
复制代码

删除

使用unlink(filepath)删除文件，参数是文件路径。

拓展功能

固然除了接收、验证、保存和删除这四个基本操做外，还能够添加诸如将文件路径存入数据库、生成文件列表等功能，视需求而定。

最初发表于blog.simmzl.cn