jquery解决input file控件中的onchange上传文件仅一次的bug

在功能区管理系统中,在上传区域网格、道路交通、以及功能区类型的xls文件时,每一个同名文件仅可以上传一次,如果下次修改了文件内容,除非刷新网页,否则上传的文件并没有生效。因此这是一个bug,在网上找了好多解决方案,最终得以成功突破。。

解决办法是这样的:

 1.原始方法:把事件写在file控件的onchange=""里面;
 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑添加.... });
 3.Jquery方法二: onchange后,生成一个新input type file代替旧的,
 $('#inputFileID').replaceWith('<input name="fileToUpload" type="file" id="inputFileID"  />');

项目中用的就是原始方法,然后在imortf函数内部,每次调用一个新的input type file代替就得input…代码如下:
HTML脚本如下:

<a href="javascript:;" class="file" style="display: inline-block;width: 65px;height: 25px;border-radius: 4px;color: #fff;text-decoration: none;font-size: 14px;background-color: #057CBE;text-align: center;line-height: 25px;">
     上传文件
     <input id="file_upload" accept=".xls,.xlsx" onchange="importf(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>
</a>

JS脚本如下:

// 上传excel文件
var wb;                  //读取完成的数据
var rABS = false;        //是否将文件读取为二进制字符串
//上传函数
function importf(obj) {
    if (!obj.files) {
        return;
    }
    try {
        var f = obj.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var data = e.target.result;
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                    type: 'base64'
                });
            } else {
                wb = XLSX.read(data, {
                    type: 'binary'
                });
            }
            var data1 = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
            //读取页面demo中的内容
            demo = JSON.parse(data1);
            console.log(demo);
            //获取选择的文件类型,调用不同的家口保存至数据库
            var select_type = $("#select_upload_type").val();
            if (select_type == "区域网格") {
                upload_grid(demo);
            } else if (select_type == "声功能区") {
                upload_gongnengType(demo);
            } else if (select_type == "道路交通") {
                upload_road(demo);
            } else {
            }
        };
        if (rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }


        //进行网页html结构的替换,如果不加这句话,每次上传文件只能上传一次
        $("#file_upload").replaceWith('<input id="file_upload" accept=".xls,.xlsx" onchange="importf(this)" name="file" type="file" style="width: 140px;position: absolute;font-size: 14px;height: 25px;left: 57%;opacity: 0;"/>');


    } catch (e) {
        alert('请选择正确类型');  //异常捕获
    }
}

文件每次上传后,调用$(“#file_upload”).replaceWith(‘’);就可以实现文件的多次上传了。。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值