限制文件上传格式

最新推荐文章于 2025-12-26 13:42:04 发布

原创最新推荐文章于 2025-12-26 13:42:04 发布 · 971 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#大数据 #javascript

周记同时被 3 个专栏收录

67 篇文章

订阅专栏

项目实战

17 篇文章

订阅专栏

前端笔记

16 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现文件上传前的类型检查，确保只允许上传.jpg, .png, .gif格式的图片。并通过Promise链式调用，展示了如何将通过验证的文件通过Ajax发送到服务器进行头像更新操作。

1.直接上代码：

 function checkFile(img) {
    let file = img;
    console.log(img);
    if (file == null || file == "") {
        successText.innerHTML = "请选择要上传的文件!";
            keepSuccess.style.height = '200px';
            inputReadOnly();
            okBtn.addEventListener('click', function() {
                keepSuccess.style.height = 0;
                inputChange();
            })
        return false;
    }
    //定义允许上传的文件类型
    var allow_ext = ".jpg|.png|.gif";
    //提取上传文件的类型
    var ext_name = file.substring(file.lastIndexOf("."));
    //判断上传文件类型是否允许上传
    if (allow_ext.indexOf(ext_name + "|") == -1) {
        successText.innerHTML =  "该文件不允许上传，请上传" + allow_ext + "类型的文件,当前文件类型为：" + ext_name;
            keepSuccess.style.height = '200px';
            inputReadOnly();
            okBtn.addEventListener('click', function() {
                keepSuccess.style.height = 0;
                inputChange();
            })
        return false;
    }
}

这是封装的判断文件是图片的函数；

2.接口调用该函数：

function fileChange() {
    var formData = new FormData();
    let headname=$('#file')[0].value;
    let ishead=checkFile(headname);
   if(ishead!=false){
       let changemyhead=new Promise((resolve,reject)=>{
           formData.append('profile1', $('#file')[0].files[0]);
           formData.append('account', sessionStorage.getItem("account"));
           resolve();
       });
       changemyhead.then(()=>{
           $.ajax({
               // 类型
               type: "POST",
               url: "http://localhost:8080/ToSkyNews_war_exploded/saveUserProfile",
               data: formData,
               dataType: "json",
               contentType: false,
               processData: false,
               success: function(date) {
                   console.log(date);
                   if (date.message == "成功并返回数据") {
                       successText.innerHTML = '上传头像成功！!';
                       keepSuccess.style.height = '200px';
                       inputReadOnly();
                       okBtn.addEventListener('click', function() {
                           keepSuccess.style.height = 0;
                           inputChange();
                       })
                   } else {
                       successText.innerHTML = '上传头像失败，请重试！';
                       keepSuccess.style.height = '200px';
                       inputReadOnly();
                       okBtn.addEventListener('click', function() {
                           keepSuccess.style.height = 0;
                           inputChange();
                       })
                   }
                   console.log(date.data.file.data);
                   changeHead.style.backgroundImage = `url(https://blog.csdn.net/$%7Bdate.data.file.data%7D)`;
                   for (let i = 0; i < userHead.length; i++) {
                       userHead[i].style.backgroundImage = `url(https://blog.csdn.net/$%7Bdate.data.file.data%7D)`;
                   }
               },
               error: function(returndata) {
                   console.log(returndata);
               }
           })
       })
   }
}