js input file修改默认样式及onchange事件不能多次触发的解决办法

2017-12-20 23:29:25 4,039 views

最近项目中有用到修改input file的默认样式及上传excel文件前台部分,这里总结下。
大致思路是隐藏原来的样式，然后在原来的样式上覆盖一个新样式。

Table of Contents

导入样式

如果你觉得不错,可以使用下面素材。j记得将图片导入到你的项目中，路径也要对上。

我的实现为label标签

html代码

<label for="uploadFiles" id="uploadFiles2">导入</label>
    <input type="file" id="uploadFiles" />

css代码

#uploadFiles {
  position: absolute;
  clip: rect(0, 0, 0, 0);
/*这2行是关键，脱离文档流  裁剪*/
}
#uploadFiles2 {
  background: #ccc url(../img/in.png) no-repeat 10px -3px;
  border: 1px solid #999;
  bottom: 0px;
  box-sizing: border-box;
  cursor: pointer;
  color: #666;
  display: inline-block;
  position: fixed;
  padding-left: 32px;
  margin-left: 250px;
  left: 50%;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-weight: 700;
  font-size: 20px;
}

js 上传excel 文件代码前台

后台得接收数据。并添加到数据库中即可。

var wb; //读取完成的数据
      var rABS = false; //是否将文件读取为二进制字符串
      var uploadFiles = document.getElementById("uploadFiles");
      var fn = function(event) {
        event = event||window.event;
        event.stopPropagation();
        var _this = event.target || event.srcElement;
        importf(_this);
        function importf(obj) { //导入
          if(!obj.files) {
            return;
          }
          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 ar = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
            $.ajax({
              url: "selectContent",//记得换成自己的url
              type: "post",
              dataType: "json",
              data: {
                indata: ar  //组装数据到后台
              },
              beforeSend: function() {
                $("body").append("<progress class='progress'></progress>");
              },
              success: function(msg) {
                $(".progress").remove();
                alert("\u5bfc\u5165\u6210\u529f");
                $("#uploadFiles").val(""); //解决onchange事件只能触发一次
              },
              error: function() {
                alert("error!");
              }
            });
          };
          if(rABS) {
            reader.readAsArrayBuffer(f);
          } else {
            reader.readAsBinaryString(f);
          }
        }
        function fixdata(data) { //文件流转BinaryString
          var o = "",
            l = 0,
            w = 10240;
          for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
          o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
          return o;
        }
      };
$("#uploadFiles").on("change",fn);

input的onchange事件 bug

input file onchange事件上传文件有一个bug。就是只能触发一次，可以通过将input file的value值设置为空就可以解决。就能够触发多次onchange事件

$("#uploadFiles").val(""); //input