2. 程式人生 > >js/jquery 獲取本地檔案的檔案路勁 獲取input框中type=‘file’ 中的檔案路徑

js/jquery 獲取本地檔案的檔案路勁 獲取input框中type=‘file’ 中的檔案路徑

阿新 • • 發佈：2019-01-23

分為兩部分，自己去判斷瀏覽器的型別，然後呼叫不同函式，一定要引入jQuery，上面是我的Jquery的路徑

在IE低版本中可以直接獲得檔案路徑，不過在高版本和firefox和chrome中是不允許的。那是個漏洞

這樣就能實現不用上傳就可以實現圖片的實時預覽了

1.IE核心的部分，IE10 沒問題，別的沒試，

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml"
    >
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
  5. <title>無標題文件</title>
  6. <scripttype="text/javascript"src="軟體工程概論/軟體工程實驗原型/js/jquery-1.8.3.min.js"></script>
  7. <scripttype="text/javascript">
  8. var imgurl = "";  
  9. function getImgURL(node) {    
  10.     var imgURL
     = "";      
  11.     var file = null;  
  12.     if(node.files && node.files[0] ){  
  13.         file = node.files[0];   
  14.     }else if(node.files && node.files.item(0)) {                                  
  15.         file = node.files.item(0);     
  16.     }     
  17.     //這種獲取方式支援IE10    
  18.     node.select();    
  19.     imgURL
     = document.selection.createRange().text;      
  20.     alert(imgURL);  
  21.     var textHtml = "<img src='"+imgURL+"'/>";     //建立img標籤用於顯示圖片  
  22.     alert(textHtml);  
  23.     $(".mark").after(textHtml);  
  24.     return imgURL;  
  25. }  
  26. </script>
  27. </head>
  28. <body>
  29.     <divstyle="width:200px; height:210px; border:1px solid red;"id="show">
  30.         <divclass="mark"></div>
  31.     </div>
  32. <br>
  33. <inputtype="file"value="上傳檔案"onchange="getImgURL(this)">
  34. </body>
  35. </html>

2.火狐和chrome瀏覽器，其實這個獲得的檔案路徑不是我們能看懂的，它是一個物件，不過瀏覽器能解析，可能出於瀏覽器的安全考慮吧，本來不能顯示檔案路徑
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
  5. <title>無標題文件</title>
  6. <scripttype="text/javascript"src="軟體工程概論/軟體工程實驗原型/js/jquery-1.8.3.min.js"></script>
  7. <scripttype="text/javascript">
  8. var imgurl = "";  
  9. function getImgURL(node) {    
  10.     var imgURL = "";      
  11.     try{     
  12.         var file = null;  
  13.         if(node.files && node.files[0] ){  
  14.             file = node.files[0];   
  15.         }else if(node.files && node.files.item(0)) {                                  
  16.             file = node.files.item(0);     
  17.         }     
  18.         //Firefox 因安全性問題已無法直接通過input[file].value 獲取完整的檔案路徑  
  19.         try{  
  20.             //Firefox7.0   
  21.             imgURL =  file.getAsDataURL();    
  22.             //alert("//Firefox7.0"+imgRUL);                           
  23.         }catch(e){  
  24.             //Firefox8.0以上                                
  25.             imgRUL = window.URL.createObjectURL(file);  
  26.             //alert("//Firefox8.0以上"+imgRUL);  
  27.         }  
  28.      }catch(e){      //這裡不知道怎麼處理了，如果是遨遊的話會報這個異常                   
  29.         //支援html5的瀏覽器,比如高版本的firefox、chrome、ie10  
  30.         if (node.files && node.files[0]) {                            
  31.             var reader = new FileReader();   
  32.             reader.onload = function (e) {                                        
  33.                 imgURL = e.target.result;    
  34.             };  
  35.             reader.readAsDataURL(node.files[0]);   
  36.         }    
  37.      }  
  38.     //imgurl = imgURL;  
  39.     creatImg(imgRUL);  
  40.     return imgURL;  
  41. }  
  42. function creatImg(imgRUL){   //根據指定URL建立一個Img物件  
  43.     var textHtml = "<img src='"+imgRUL+"'/>";  
  44.     $(".mark").after(textHtml);  
  45. }  
  46. </script>
  47. </head>
  48. <body>
  49.     <divstyle="width:90px; height:110px; overflow:hidden; border:1px solid red;"id="show">
  50.         <divclass="mark"></div>
  51.     </div>
  52. <br>
  53. <inputtype="file"value="上傳檔案"onchange="getImgURL(this)">
  54. </body>
  55. </html>

3.其餘的瀏覽器。我沒有測試，不過國內的其他如360和遨遊，等都有兩種模式，一種是IE核心，這（1）中可以執行，第二種核心沒找到好方法

4.推薦出處

相關推薦

js/jquery 獲取本地檔案的檔案路勁 獲取input框中type=‘file’ 中的檔案路徑

分為兩部分，自己去判斷瀏覽器的型別，然後呼叫不同函式，一定要引入jQuery，上面是我的Jquery的路徑 在IE低版本中可以直接獲得檔案路徑，不過在高版本和firefox和chrome中是不允許的。那是個漏洞 這樣就能實現不用上傳就可以實現圖片的實時預覽了 1.

js/jquery 獲取本地檔案的檔案路勁 獲取input框中type=‘file’ 中的檔案路徑

分為兩部分，自己去判斷瀏覽器的型別，然後呼叫不同函式，一定要引入jQuery，上面是我的Jquery的路徑 在IE低版本中可以直接獲得檔案路徑，不過在高版本和firefox和chrome中是不允許的。那是個漏洞 這樣就能實現不用上傳就可以實現圖片的實時預覽了 1.IE核心

Java 檔案路勁獲取（流的方式），適用與jar包或war包執行方式

讀取檔案使用流的方式在基本的場合都不會發生錯誤！ 以下是讀取檔案的幾種方式： public static void main(String[] args) { //獲取cla

js jquery 根據頁面及後臺資訊彈出提示框

1.功能背景：        如果某個jsp頁面通過讀取當前頁面或者根據後臺傳過來的值，並判斷該值，來決定是否彈出提示框。2.實現方式：        在jsp等前臺頁面，新增如下程式碼。通過js，jquery方式進行隱藏值的判斷。<%--隱藏值--%> <

input type="file" 選取檔案路徑時出現fakepath問題IE瀏覽器解決辦法

今天寫程式碼時需要使用者選取一個檔案然後提交，因為需要用到檔案的絕對路徑，所有我用一個 text文字框接住地址，於是我發現了問題 高版本的瀏覽器為了安全期間，會將路徑的進行隱藏，並且加上fakepath取代其中的地址，這樣就與我想要的結果不一樣了，我查了很多資料，但是隻解

input 框上傳多個檔案以及檔案校驗

1、如何上傳多個檔案      在input標籤中加入 multiple 屬性，如下 <input type="file" name="file1" id="file1" multiple="multiple"/>        當然，這樣也是一樣的： <

表單中為file的檔案是否為空驗證

[size=x-small][/size][color=blue]<input type="file" id="file" /> var oFile = document.getElementById('fi

解決input type=file 同一個檔案二次上傳無效的問題

在做上傳檔案的時候，大家會引入input標籤。但在實現的過程中，在上傳一個檔案後，第二次上傳同一個檔案時會無法觸發上傳的程式

JQuery應用例項學習 —— 16 節點包裹input框與li標籤中字型加粗

 jQuery包結點 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

解決type=file中獲取不到value值

做前端開發的童鞋肯定會遇到這樣的需求，獲取表單裡面全部input的值。 但是也不難發現這樣的bug，給type=“file”的input標籤賦值value，然後再通過js去獲取value的時候，發現根本拿不到想要的那個值，拿到的是空字串。 通過zepto或者

jquery通過ajax方法獲取本地json檔案不執行success回撥

//a.json { list:{ createtime:"2018/11/05 16:45:22", status: 0, name: "aa", price: "188.00", num: "2", img: "1.jpg" } }

js獲取本地資料夾中檔案列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

js根據路徑獲取本地檔案流資訊

案例：在系統中使用簽字筆產生的圖片直接傳到伺服器，不通過input上傳，本人是沒法獲取資料流，解決方案；使用圖片轉base64 程式碼如下： var img = "http://127.0.0.

JS中獲取本地json檔案構建zTree

標準的json物件格式為{"key":value,"key2":value2} 有雙引號$.getJSON("json/layer.json?"+timestamp, function (data){}能夠獲取本地json檔案資料$.ajax也能夠獲取本地json檔案資料示例

WPF 呼叫OpenFileDialog物件，實現獲取檔案上傳路勁

wpf  好像 沒有直接的檔案上傳控制元件，反正我沒找到 我在網上找了好久，沒有簡單直接的例子，只好自己放了一個按鈕，然後呼叫OpenFileDialog物件，實現獲取檔案上傳路勁 後臺程式碼  private void button1_Click(object send

JS獲取本地檔案的方式

通過js來獲取檔案的方式，記錄兩種方法： 第一種，通過input獲取： html: <input type="file" id="files" multiple="multiple" > 其中multiple表示可以同時選中多檔案

自定義屬性tab復制就可以用 把Jquery.js路勁換一下

span addclass .data title splay cal idt move oct <!doctype html><html lang="en"><head> <meta charset="UTF-8">

Android獲取本地檔案的真實路徑，content型別轉為file型別

來源網路。記錄知識點以防備用..... 相容不同的機型獲取到的檔案路徑型別，以防異常情況發生。 public static String getPath(Context context, Uri uri) { if ("content".equalsIgnoreCase(uri.ge

XMLHttpRequest()獲取本地檔案

網頁中可以使用相對URL的能力通常意味著我們能使用本地檔案系統來開發和測試HTML，並避免對Web伺服器進行不必要的部署。 然而當使用XMLHttpRequest進行Ajax程式設計時，這通常是不行的。1、XMLHttpRequest需要同HTTP和HTTPS協議一起工作。2、理論上，它能夠同FTP

js jquery驗證上傳檔案的格式和大小

// 驗證附件格式和大小 function confirmData() { var flag = true; var message = ""; var errorSize = ""; var fileSuffix = $("#fileSuffix").val(