一、为什么需要文件上传功能
1、随着互联网应用的不断增加，前端上传文件功能变得越来越常见。比如：用户上传头像、上传文件、上传图片等都需要前端文件上传功能的支持。
2、前端文件上传功能也是提高应用体验的一个重要手段，可以使用户方便快捷地上传自己想要分享的文件，节省用户时间。
3、同时，前端文件上传功能也为开发者提供了更多的创意空间，如通过web端文件上传实现实时数据的展示、动态修改文件等功能。
二、前端文件上传方式
1、form表单上传方式
<form action="server/upload.php" enctype="multipart/form-data" method="POST"> <input type="file" name="file"> <input type="submit" value="上传"> </form>
使用form表单上传功能时，需要设置enctype属性值为”multipart/form-data”，同时将表单数据设置为POST请求方式。form表单并不需要额外的JavaScript操作，但是对于大文件上传用户上传等场景并不友好。
2、XMLHttpRequest上传方式
var fileObj = document.getElementById("file").files[0];
var xhr = new XMLHttpRequest();
var form = new FormData();
form.append("file", fileObj);//添加file到表单
xhr.open("post", "/upload", true);
xhr.onload = function(){
console.log("上传成功");
}
xhr.send(form);//发送文件
使用XMLHttpRequest上传文件可以通过JavaScript实现进度条的功能，同时利用FormData类和Blob对象将文件作为二进制数据传送给后端服务器。
三、前端文件上传的限制
1、文件大小限制
可以通过设置input[type=”file”]的accept、capture、multiple属性限制文件的大小，但是IE浏览器并不支持这些属性，因此需要通过JavaScript判断文件大小并给出提示，同时后端服务器也需要做相应的文件上传大小限制，防止恶意上传。
<input type="file" name="file" accept="image/gif, image/jpeg" capture="camera" multiple>
<script>
var fileObj = document.getElementById("file").files[0];
var fileSize = fileObj.size;
if(fileSize > 10*1024*1024){//限制文件为10M以下
alert("文件太大了");
}
</script>
2、文件类型限制
同样也可以通过input[type=”file”]的accept属性和后端服务器的文件类型判断限制来限制文件格式，防止非法文件上传，提高安全性。
<input type="file" name="file" accept=".jpg, .png, .gif">
四、前端文件上传注意事项
1、如果上传的文件较大，需要给予用户上传进度的反馈，可以通过调用XMLHttpRequest的progress函数来获取上传进度。
xhr.upload.onprogress = function(event){
if(event.lengthComputable){
var percentComplete = event.loaded / event.total * 100;
console.log("上传进度：" + percentComplete + "%")
}
}
2、在上传大文件时，客户端应该将文件切分为多个小文件并分别上传，提高上传效率。
3、对于跨域的上传请求，需要服务端设置允许CORS跨域请求，同时客户端在发送请求前也要修改XHR的特定设置来使其支持跨域请求。
4、如果有需要，在文件上传前可以对文件进行压缩、加密等操作，提高上传速度同时保障安全性。
五、总结
前端文件上传是实现很多web应用的必要功能，虽然前端文件上传看起来简单，但是需要开发者理解上传方式、限制等方方面面，才能实现高效安全的上传操作。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192223.html
微信扫一扫 
支付宝扫一扫 