您的位置:首页 > Web前端 > JavaScript

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

2017-09-03 10:48 656 查看
js提交form表单

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

1. document.formName.submit();

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

    form.submit();

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

html

[html] view
plain copy

<form  action="/ask/addaskrecordattachment2" 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);" /> <input type="hidden" name="id" class="hideids" /></div>  

       <div class="upload_btns" style="color:red;" id="upsizelabel"> (为了保证您的询价质量及服务,请先下载材料模板)</div>  

  </div>  

  <div class="attachs fl">  

       <div class="t_fjfont" style="color:red;font-size:12px;font-weight:bold">文件上限2MB</div>  

       <div class="upload_btns" style="color:0066CC;text-decoration: underline;"> <a href="javascript:getDownload();" >附件表格样式(下载)</a></div>  

  </div>  

  <div class="attachs fl">  

       <div class="t_fjfont"> </div>  

       <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 class="upload_btns" style="color:red;" id="upsizelabel"> (请上传CAD图纸或者图片格式,此处不接受询价单)</div>  

  </div>  

   <div class="clear"></div>  

  </form>  

js

[javascript] view
plain copy

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  

        }  

      }  

ps:支持市面上主流的浏览器~~~~~IE,谷歌,FF都支持!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐