重新认识前端上传文件
最近温习了一下前端的基础知识,发现上传文件有点道道,这里目前知道的总结一下,以后会做补充。
表单上传的本质
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="myFile">
<input type="submit">
</form>
如上面的代码,是一个简单的表单上传文件,选择文件后,点击提交按钮,便会请求 action 指定的上传路径,交由后端 cgi 程序处理。在这里注意,需要指定 enctype=“multipart/form-data” 这个字段表示以什么数据编码格式传送给服务端,multipart/form-data 用来文件上传时使用,另外这里 multipart/form-data 是在 post 基础上使用的,所以在此必须指定上传方式为 post。用php 打印 $_FILES 这个遍历看看是什么。下面是 php 代码:
var_dump($_FILES);
下面是打印的结果
array(1) { ["myFile"]=> array(5) { ["name"]=> string(8) "temp.txt" ["type"]=> string(10) "text/plain" ["tmp_name"]=> string(53) "C:\Users\Administrator\AppData\Local\Temp\php6077.tmp" ["error"]=> int(0) ["size"]=> int(0) } }
以上是表单的行为,总结一下,就是设置 method 以及 enctype 字段来进行文件的上传,我们都知道用 ajax 发起请求,我们知道 原生的 ajax 发送的请求参数可以是字符串和 FormData 格式 ,在 jq 里就是设置 data 为对象或者 FormData,我们用 jq的 ajax 发起一次请求,请求上传文件试试,看看会发生什么。下面是前端代码
<script>
function chooseFile(e) {
var file = e.target.files[0];
var formData = new FormData;
formData.append("file", file);
$.ajax({
url: 'add.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success (res) {
console.log(res)
}
})
}
</script>
后端代码不变,我们在选择完文件以后看一下 调试工具上的请求信息
可以看到用 ajax 发起的文件请求与用表单发起的请求结果完全一致,也就是说表单的上传文件其实就是用 FormData 上传文件,
只不过封装了过程。也就是说,不论是表单上传,还是利用 ajax 指定 FormData 上传,其实都是 http协议以及浏览器对其实现的使用,所以一定要学好 http