码迷,mamicode.com
首页 > Web开发 > 详细

input file 文件上传,js控制上传文件的大小和格式

时间:2017-03-16 20:39:05      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:system   hidden   rip   btn   jquery   cti   http   问题   form   

文件上传一般是用jquery的uploadify,比较好用。后面会出文章介绍uploadify这个插件。

但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input file 可以控制上传的格式,但是是html5,很多浏览器不支持,请看我的文章对input file上传类型的控制

下面我用javascript来控制文件上传的大小和类型。

贴出html代码:

<form  action="后端接口" enctype="multipart/form-data" method="post" id="attachment_uploads">
  <div class="attachs fl">
       <div class="t_fjfont">附件:</div>
       <div class="upload_btns"><input type="file" name="file"  id="file" onchange="fileChange(this);" /> </div>
  </div>
  <div class="attachs fl">
       <div class="t_fjfont" style="color:red;font-size:12px;font-weight:bold">文件上限2MB</d
  </div>
  <div class="attachs fl">
       <div class="upload_btns"><input type="file" name="files"  id="file_fujian" onchange="filefujianChange(this);" /> <input type="hidden" name="rev" class="hide_rev" /></div>
  </div>
  </form>

javascript代码:


var isIE = /msie/i.test(navigator.userAgent) && !window.opera;

function fileChange(target) {
     var fileSize = 0;         
     if (isIE && !target.files) {     
       var filePath = target.value;     
       var fileSystem = new ActiveXObject("Scripting.FileSystemObject");        
       var file = fileSystem.GetFile (filePath);     
       fileSize = file.Size;    
     } else {    
      fileSize = target.files[0].size;     
      }   
      var size = fileSize / 1024;    
      if(size>2000){  
       alert("附件不能大于2M");
       target.value="";
       return
      }
      var name=target.value;
      var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
      if(fileName !="xls" && fileName !="xlsx"){
          alert("请选择execl格式文件上传!");
          target.value="";
          return
      }
    } 

   function filefujianChange(target) {
       var fileSize = 0;         
       if (isIE && !target.files) {     
         var filePath = target.value;     
         var fileSystem = new ActiveXObject("Scripting.FileSystemObject");        
         var file = fileSystem.GetFile (filePath);     
         fileSize = file.Size;    
       } else {    
        fileSize = target.files[0].size;     
        }   
        var size = fileSize / 1024;    
        if(size>2000){  
         alert("附件不能大于2M");
         target.value="";
         return
        }
        var name=target.value;
        var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
        if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
          alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!");
            target.value="";
            return
        }
      }

上面代码当时为了考虑兼容问题,没有写html5的文件上传控制,直接在js中控制了。本代码支持所有主流浏览器!兼容性还是可以的!欢迎交流!

 

原文链接

input file 文件上传,js控制上传文件的大小和格式

标签:system   hidden   rip   btn   jquery   cti   http   问题   form   

原文地址:http://www.cnblogs.com/GoCircle/p/6561220.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!