限制文件上传格式

17 篇文章 0 订阅
16 篇文章 0 订阅

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(${date.data.file.data})`;
                   for (let i = 0; i < userHead.length; i++) {
                       userHead[i].style.backgroundImage = `url(${date.data.file.data})`;
                   }
               },
               error: function(returndata) {
                   console.log(returndata);
               }
           })
       })
   }
}

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿泽不会飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值