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

版权声明:差不多先生,欢迎转载 https://blog.csdn.net/insistlzh/article/details/74331106

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

阅读更多

扫码向博主提问

罗忠浩

博客专家

什么都懂一点,生活更精彩一点。
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页