打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

下面我用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代码:

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中控制了。本代码支持所有直流浏览器!兼容性还是可以的!欢迎交流!

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
ASP.NET MVC 文件上传教程(一)
成功element ui el-upload上传文件
多个文件上传的javascript编码
HTML5实现多张图片上传功能
摘录网络 asp 上传代码 支持大文件上传
MVC 中使用uploadify上传图片遇到的蛋疼问题
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服