JS 判断上传的文件大小和后缀

记得老久以前我的浏览器不允许用JS获取INPUT选中的文件的路径。

代码是从我以前写的一个文件里扒出来的,这里阉割了部分代码。不想听我吹水的话看check()函数即可。原INPUT样式太霸道,干脆隐藏了,用label for来代替,renewfileinfo()用来更新选中的文件名称,给button绑定个upload()函数用JQ同步上传文件,是同步,不知道当时我怎么想的...翻了下全部代码发现是想要显示上传结束后返回的内容。

html

<form id="form" onsubmit="return false" enctype="multipart/form-data">
    <label for="bt" class="selectfile">
        <span id="selectfile">点击选择</span>文件
        <input type="file" id="bt" style="display: none;" name="bt" onchange="renewfileinfo();">
    </label>
    <button id="submit" onclick="upload();">上传</button>
</form>

javascript

function renewfileinfo() {
  var el = document.getElementById("bt").value;
  var pos = el.lastIndexOf("\\");
  var fl = el.substring(pos+1);
  if (!fl) {
    fl = "点击选择";
  }
  document.getElementById("selectfile").innerHTML=fl;
}
function check(){
  var obj = bt; //input的id
  Ext=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名
  if(Ext!='.zip'){
    alert("请上传后缀名为.zip的文件!");
    return false;
  }
  var fileSize = 0;
  var isIE = /msie/i.test(navigator.userAgent) && !window.opera;      
  if (isIE && !obj.files) {     
     var filePath = obj.value;      
     var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
     var file = fileSystem.GetFile(filePath);        
     fileSize = file.Size;     
  }else { 
     fileSize = obj.files[0].size;   
  }
  fileSize=Math.round(fileSize/1024*100)/100; //单位为KB
  if(fileSize>=2048){
    alert("文件最大尺寸为2MB,请重新上传!");
    return false;
  }
  return true;
}

function upload(){
    if (!confirm("确定上传?")) {
        return false;
    }
    if (!check()) { //检测是否合格
        return false;
    }
      var form = new FormData(document.getElementById("form"));  
      var up = $.ajax({
      url:"*******",
      type:"post",
      data:form,
      cache: false,
      async: false,
      processData: false,
      contentType: false,
      success:function(data){
          alert("上传成功");
          $("#bt").val("");
          renewfileinfo();
      },
      error:function(e){
          alert("上传失败");
       }
      });
}

标签: none

添加新评论