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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。