js/jquery 獲取本地檔案的檔案路勁 獲取input框中type=‘file’ 中的檔案路徑
阿新 • • 發佈：2019-02-19
分為兩部分，自己去判斷瀏覽器的型別，然後呼叫不同函式，一定要引入jQuery，上面是我的Jquery的路徑
在IE低版本中可以直接獲得檔案路徑，不過在高版本和firefox和chrome中是不允許的。那是個漏洞
這樣就能實現不用上傳就可以實現圖片的實時預覽了
1.IE核心的部分，IE10 沒問題，別的沒試，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="軟體工程概論/軟體工程實驗原型/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> var imgurl = ""; function getImgURL(node) { var imgURL = ""; var file = null; if(node.files && node.files[0] ){ file = node.files[0]; }else if(node.files && node.files.item(0)) { file = node.files.item(0); } //這種獲取方式支援IE10 node.select(); imgURL = document.selection.createRange().text; alert(imgURL); var textHtml = "<img src='"+imgURL+"'/>"; //建立img標籤用於顯示圖片 alert(textHtml); $(".mark").after(textHtml); return imgURL; } </script> </head> <body> <div style="width:200px; height:210px; border:1px solid red;" id="show"> <div class="mark"></div> </div> <br> <input type="file" value="上傳檔案" onchange="getImgURL(this)"> </body> </html>
2.火狐和chrome瀏覽器，其實這個獲得的檔案路徑不是我們能看懂的，它是一個物件，不過瀏覽器能解析，可能出於瀏覽器的安全考慮吧，本來不能顯示檔案路徑
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <script type="text/javascript" src="軟體工程概論/軟體工程實驗原型/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> var imgurl = ""; function getImgURL(node) { var imgURL = ""; try{ var file = null; if(node.files && node.files[0] ){ file = node.files[0]; }else if(node.files && node.files.item(0)) { file = node.files.item(0); } //Firefox 因安全性問題已無法直接通過input[file].value 獲取完整的檔案路徑 try{ //Firefox7.0 imgURL = file.getAsDataURL(); //alert("//Firefox7.0"+imgRUL); }catch(e){ //Firefox8.0以上 imgRUL = window.URL.createObjectURL(file); //alert("//Firefox8.0以上"+imgRUL); } }catch(e){ //這裡不知道怎麼處理了，如果是遨遊的話會報這個異常 //支援html5的瀏覽器,比如高版本的firefox、chrome、ie10 if (node.files && node.files[0]) { var reader = new FileReader(); reader.onload = function (e) { imgURL = e.target.result; }; reader.readAsDataURL(node.files[0]); } } //imgurl = imgURL; creatImg(imgRUL); return imgURL; } function creatImg(imgRUL){ //根據指定URL建立一個Img物件 var textHtml = "<img src='"+imgRUL+"'/>"; $(".mark").after(textHtml); } </script> </head> <body> <div style="width:90px; height:110px; overflow:hidden; border:1px solid red;" id="show"> <div class="mark"></div> </div> <br> <input type="file" value="上傳檔案" onchange="getImgURL(this)"> </body> </html>
3.其餘的瀏覽器。我沒有測試，不過國內的其他如360和遨遊，等都有兩種模式，一種是IE核心，這（1）中可以執行，第二種核心沒找到好方法
4.推薦出處