js提交form表单 - input file 文件上传控制上传文件的大小和格式

js提交form表单

所以我总结了一下,用JavaScript提交表单大概有两种写法(根据我目前的理解)

1. document.formName.submit();

2.  var form = document.getElementById(id);
    form.submit();

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

html

[html] 
view plain  
copy

  1. <form  action=“/ask/addaskrecordattachment2” enctype=“multipart/form-data” method=“post” id=“attachment_uploads”>  
  2.   <div class=“attachs fl”>  
  3.        <div class=“t_fjfont”>附件:</div>  
  4.        <div class=“upload_btns”><input type=“file” name=“file”  id=“file” onchange=“fileChange(this);” /> <input type=“hidden” name=“id” class=“hideids” /></div>  
  5.        <div class=“upload_btns” style=“color:red;” id=“upsizelabel”> (为了保证您的询价质量及服务,请先下载材料模板)</div>  
  6.   </div>  
  7.   <div class=“attachs fl”>  
  8.        <div class=“t_fjfont” style=“color:red;font-size:12px;font-weight:bold”>文件上限2MB</div>  
  9.        <div class=“upload_btns” style=“color:0066CC;text-decoration: underline;”> <a href=“javascript:getDownload();” >附件表格样式(下载)</a></div>  
  10.   </div>  
  11.   <div class=“attachs fl”>  
  12.        <div class=“t_fjfont”> </div>  
  13.        <div class=“upload_btns”><input type=“file” name=“files”  id=“file_fujian” onchange=“filefujianChange(this);” /> <input type=“hidden” name=“rev” class=“hide_rev” /></div>  
  14.        <div class=“upload_btns” style=“color:red;” id=“upsizelabel”> (请上传CAD图纸或者图片格式,此处不接受询价单)</div>  
  15.   </div>  
  16.    <div class=“clear”></div>  
  17.   </form>  

js

[javascript] 
view plain  
copy

  1. function fileChange(target) {  
  2.      var fileSize = 0;           
  3.      if (isIE && !target.files) {       
  4.        var filePath = target.value;       
  5.        var fileSystem = new ActiveXObject(“Scripting.FileSystemObject”);          
  6.        var file = fileSystem.GetFile (filePath);       
  7.        fileSize = file.Size;      
  8.      } else {      
  9.       fileSize = target.files[0].size;       
  10.       }     
  11.       var size = fileSize / 1024;      
  12.       if(size>2000){    
  13.        alert(“附件不能大于2M”);  
  14.        target.value=“”;  
  15.        return  
  16.       }  
  17.       var name=target.value;  
  18.       var fileName = name.substring(name.lastIndexOf(“.”)+1).toLowerCase();  
  19.       if(fileName !=“xls” && fileName !=“xlsx”){  
  20.           alert(“请选择execl格式文件上传!”);  
  21.           target.value=“”;  
  22.           return  
  23.       }  
  24.     }   
  25.       
  26.    function filefujianChange(target) {  
  27.        var fileSize = 0;           
  28.        if (isIE && !target.files) {       
  29.          var filePath = target.value;       
  30.          var fileSystem = new ActiveXObject(“Scripting.FileSystemObject”);          
  31.          var file = fileSystem.GetFile (filePath);       
  32.          fileSize = file.Size;      
  33.        } else {      
  34.         fileSize = target.files[0].size;       
  35.         }     
  36.         var size = fileSize / 1024;      
  37.         if(size>2000){    
  38.          alert(“附件不能大于2M”);  
  39.          target.value=“”;  
  40.          return  
  41.         }  
  42.         var name=target.value;  
  43.         var fileName = name.substring(name.lastIndexOf(“.”)+1).toLowerCase();  
  44.         if(fileName !=“jpg” && fileName !=“jpeg” && fileName !=“pdf” && fileName !=“png” && fileName !=“dwg” && fileName !=“gif” ){  
  45.           alert(“请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!”);  
  46.             target.value=“”;  
  47.             return  
  48.         }  
  49.       }  

ps:支持市面上主流的浏览器~~~~~IE,谷歌,FF都支持!

    原文作者:越简单 越好
    原文地址: https://blog.csdn.net/gong1422425666/article/details/77816392
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞