AJAX上传文件，控制文件大小，格式

如何利用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这里对上传的文件格式进行限制
    
    <button id="upload" type="button">uploadbutton>
  form>

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);
          });
        }
      });

这样就可以利用AJAX完成文件的上传，并对格式与大小进行限制。
技术需要交流，大清亡与闭关锁国。
欢迎转载。form 三思 QQ599901155