input file 添加

时间 2020-09-14

标签 input file 添加繁體版

原文原文链接

 
      代码以下利用html5实现:几乎兼容全部主流浏览器，固然IE必须是IE 6以上 
     
      【jquery代码】 
     
      $( 
      function 
      () { 
     
      $( 
      "#file_upload" 
      ).change( 
      function 
      () { 
     
      var  
      $file = $( 
      this 
      ); 
     
      var  
      fileObj = $file[0]; 
     
      var  
      windowURL = window.URL || window.webkitURL; 
     
      var  
      dataURL; 
     
      var  
      $img = $( 
      "#preview" 
      ); 
     
      if 
      (fileObj && fileObj.files && fileObj.files[0]){ 
     
      dataURL = windowURL.createObjectURL(fileObj.files[0]); 
     
      $img.attr( 
      'src' 
      ,dataURL); 
     
      } 
      else 
      { 
     
      dataURL = $file.val(); 
     
      var  
      imgObj = document.getElementById( 
      "preview" 
      ); 
     
      // 两个坑: 
     
      // 一、在设置filter属性时，元素必须已经存在在DOM树中，动态建立的Node，也须要在设置属性前加入到DOM中，先设置属性在加入，无效； 
     
      // 二、src属性须要像下面的方式添加，上面的两种方式添加，无效； 
     
      imgObj.style.filter =  
      "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" 
      ; 
     
      imgObj.filters.item( 
      "DXImageTransform.Microsoft.AlphaImageLoader" 
      ).src = dataURL; 
     
      } 
     
      }); 
     
      }); 
     
      【html代码】： 
     
      <input id= 
      "file_upload"  
      type= 
      "file"  
      /> 
     
      <div class= 
      "image_container" 
      > 
     
      <img id= 
      "preview"  
      width= 
      "60"  
      height= 
      "60" 
      > 
     
      </div>

客户端
<input type="file" name="upfile" />

服务端代码

HttpPostedFile oFile = Request.Files["upfile"]; //这里的"upfile"要和客户端type="file"的name一致

string sFilePath = "服务器端的绝对路径";

oFile.SaveAs(sFilePath); //将上传的文件保存到指定的路径

===========================================
为什么要将type="file" 隐藏？
只有当你从type="file"点“浏览”选择要上传的文件后，执行form的post提交在服务端才能收到type="file"上传上来的数据啊html