前端文件上传的相关知识

发布时间：2023-05-19

一、为什么需要文件上传功能

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应用的必要功能，虽然前端文件上传看起来简单，但是需要开发者理解上传方式、限制等方方面面，才能实现高效安全的上传操作。

推荐文章