如何利用AJAX进行文件的上传，并对上传内容进行限制，在项目中总会遇见这样的问题，下面就为大家举个栗子。 HTML代码 form id=uploadForm enctype=multipar

如何利用AJAX进行文件的上传，并对上传内容进行限制，在项目中总会遇见这样的问题，下面就为大家举个栗子。
HTML代码

<form id="uploadForm" enctype="multipart/form-data">
//enctype必须要设置为multipart/form-data<input id="file" type="file" name="avater" accept="image/gif, image/jpeg, image/jpg, image/png"/>//accept这里对上传的文件格式进行限制<!-- <input id="file2" type="text" name="token" value="8sZAmneKa_hCzAxqo0IcHKjPEkjjLfrx_1499133253"/> --><button id="upload" type="button">upload</button></form>
  

   
1
   
2
   
3
   
4
   
5
   
6
  

JS代码部分

      $("#upload").click(function () {
    let fileSize = 0;if (!document.getElementById("file").files) {let filePath = document.getElementById("file").value;let fileSystem = new ActiveXObject("Scripting.FileSystemObject");let file = fileSystem.GetFile (filePath);fileSize = file.Size;} else {fileSize = document.getElementById("file").files[0].size;}let size = fileSize / 1024;//获取上传文件的大小，如果超过大小则提示，如果满足则上传if(size>2000){alert("附件不能大于2M");}else {//定义上传的文件let formData = new FormData(document.getElementById("uploadForm"));$.ajax({url: 'http://192.168.0.168:8888/v1/user/uploadavater',type: 'POST',cache: false,data: formData,processData: false,contentType: false//contentType必须要设置为false}).done(function(res) {
    console.log(res);}).fail(function(res) {
    alert("no")console.log(res);});}});