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

文件上传一般是用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控制上传文件的大小和格式

最新文章

热门文章