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

2019-12-24  本文已影响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格式的图片");
        }
    }
}
上一篇 下一篇

猜你喜欢

热点阅读