美文网首页
input上传文件第一次成功或失败,第二次onChange都不触

input上传文件第一次成功或失败,第二次onChange都不触

作者: 你这个锤子 | 来源:发表于2019-12-24 11:11 被阅读0次
    因为上一次file里选择的文件路径值与本次选择的文件路径值是一样的,值没有改变所以导致file不会触发onchange事件。

    解决方法:添加$("#doorPhoto")[0].value=null;

    具体实例:

    html:
    <input type="file" accept="image/jpeg,image/jpg,image/png" id="doorPhoto" onchange='fileUpload("doorPhoto")' >
    
    js:
    上传的时候,框里只显示特定格式的文件,这个前端可以通过设置 accept 属性,但是屏蔽不了‘所有文件’这个选项,
    在浏览选项里让它多文件选中,可以使用 swfupload.swf 上传组件,配置太多具体参考文档(https://www.runoob.com/w3cnote/swfupload-guide.html)
    function fileUpload(data){
        var value=data;
        // 创建formdata对象
        var formData = new FormData();
        //保存图片信息
        var pictureAttribute=$("#"+ data)[0].files[0];
        //确定上传
        if(pictureAttribute){
            // 判断图片的大小小于10MB=10485760, 20MB=20971520
            if(pictureAttribute.size>5242880){
                alert("请选择小于5MB的图片!");
                $("#"+value)[0].value=null;
                return
            }
            if(pictureAttribute.type==="image/jpeg" || pictureAttribute.type==="image/jpg" || pictureAttribute.type==="image/png"){
                //给formData对象添加file属性,值等于图片信息
                formData.append("file", pictureAttribute);
                formData.append("fileType",data);
                $.ajax({
                    type : "post",
                    url : "#springUrl("/merchant/picFileUpload.htm")",//这里写你的url
                    data : formData,
                    async: false,
                    contentType: false,// 当有文件要上传时,此项是必须的,否则后台无法识别文件流的起始位置
                    processData: false,// 是否序列化data属性,默认true(注意:false时type必须是post)
                    dataType: "json",//这里是返回类型,一般是json,text等
                    clearForm: true,//提交后是否清空表单数据
                    success: function(data) {   //提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
                        var dataJson=JSON.parse(data);
                        $("#"+value)[0].value=null;
                        if(dataJson.message===""){
                            alert("上传成功!");
                        }
                    },
                    error: function(data, status, e) {  //提交失败自动执行的处理函数。
                        alert('上传失败!');
                    }
                });
            } else {
                alert("只支持png,jpg,jpeg,gif,svg格式的图片");
            }
        }
    }
    

    相关文章

      网友评论

          本文标题:input上传文件第一次成功或失败,第二次onChange都不触

          本文链接:https://www.haomeiwen.com/subject/fvbxoctx.html