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

来源：互联网发布：人工智能加大贫富差距编辑：程序博客网时间：2024/05/22 12:50

如何利用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>

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

阅读全文

1 0