標籤：
<!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=gb2312" /><title>上傳圖片</title></head><body><table width="100%" border="0" cellspacing="0" cellpadding="0" id="myTable"> <tr id="row1"> <td style="text-align:right; height:25px;">圖片路徑：</td> <td><input name="fileImages" type="file" onchange="ShowImg(this.value);"/></td> </tr> </table> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="imgs"> <tr> <img id="myImg" src="file:///F|/臨時/temp/draw photo/001e4fc48be554.jpg"/> </tr> <tr> <td style="text-align:center; height:30px;"> <input name="up" type="button" value="再上傳一個圖片" /></td> </tr></table></body><script type="text/javascript"> function $(id){return document.getElementById(id);} function ShowImg(file_url){ alert(file_url); $("myImg").setAttribute("src",file_url);</script></html>
做作業時，需要實現上傳圖片瀏覽的功能，不卻怎麼也無法擷取檔案的完全路徑，上網瞭解了下，發現JavaScript是無法直接或者用戶端的檔案，（(⊙v⊙)嗯，可以，很安全，不會隨便地就被別人通過網頁獲得PC檔案）。但是~~~w(?Д?)w我特喵的要怎麼完成這個功能啊？
上網搞到了代碼：
if(document.all)/*IE （這裡得要講一下，有些瀏覽器都有了document.all,雖然我的測試結果能辨別出來Ie，還有其他辦法window.attachEvent【根據ie支援window.attachEvent添加偵聽事件，非ie用window.addEventListener添加偵聽事件來判斷的】，網上有人說opera瀏覽器能偽裝成ie，於是得用navigator.userAgent.indexOf(‘Opera‘) === -1）再加判斷 +_+ */
{
imgFile.select(); path = document.selection.createRange().text; document.getElementById("imgPreview").innerHTML="";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=‘true‘,sizingMethod=‘scale‘,src=\"" + path + "\")";//使用濾鏡效果
} else//FF {
path = imgFile.files[0].getAsDataURL();
document.getElementById("imgPreview").innerHTML = "<img id=‘img1‘ width=‘120px‘ height=‘100px‘ src=‘"+path+"‘/>"; // document.getElementById("img1").src = path;
}
於是乎就繼續搞；
網上資源：
【W3C】（不明覺厲）
FileUpload 對象在 HTML 文檔中 <input type="file"> 標籤每出現一次，一個 FileUpload 對象就會被建立。
該元素包含一個文本輸入欄位，用來輸入檔案名稱，還有一個按鈕，用來開啟檔案選擇對話方塊以便圖形化選擇檔案。
該元素的 value 屬性儲存了使用者指定的檔案的名稱，但是當包含一個 file-upload 元素的表單被提交的時候，瀏覽器會向伺服器發送選中的檔案的內容而不僅僅是傳送檔案名。
為安全起見，file-upload 元素不允許 HTML 作者或 JavaScript 程式員指定一個預設的檔案名稱。HTML value 屬性被忽略，並且對於此類元素來說，value 屬性是唯讀，這意味著只有使用者可以輸入一個檔案名稱。當使用者選擇或編輯一個檔案名稱，file-upload 元素觸發 onchange 事件控制代碼。
您可以通過遍曆表單的 elements[] 數組，或者通過使用 document.getElementById()來訪問 FileUpload 對象。
【基本原理】
圖片預覽主要包括兩個部分：從file表單控制項擷取映像資料，根據資料顯示預覽映像。
程式的file和img屬性就是用來儲存file控制項和顯示預覽映像的容器的，而img還必須是img元素。
程式有以下幾種預覽方式：
simple模式：直接從file的value擷取圖片路徑來顯示預覽，適用於ie6；
filter模式：通過selection擷取file的圖片路徑，再用濾鏡來顯示預覽，適用於ie7/8；
domfile模式：調用file的getAsDataURL方法擷取Data URI資料來顯示預覽，適用於ff3；
remote模式：最後的辦法，把file提交幕後處理後返回圖片資料來顯示預覽，全適用。
【實驗效果】
simple模式：自己小小測試了下，發現在IE中（IE10）下可以直接獲得file.value的完全路徑（(￣_,￣ )呵呵~），其他的瀏覽器都會加密。
filter模式：(╯‵□′)╯︵┻━┻特喵的壓根沒搞到什麼！！浪費我時間麼！？
domfile模式：就是針對getAsDataURL方法，辦法getAsDataURL（）可以取得使用者所選檔案的本地路徑，然則這個路徑的字串文本被FireFox加密了，並且這段密文只能被FireFox辨認，其它的瀏覽器不克不及辨認，也就是說我將被加密後的路徑直接賦值給一個img標籤的src屬性，在FireFox中是可以直接顯示出的，而在IE中卻不可。（這東西好像只能用在Firefox）
新版本的Firefox7不認識getAsDataURL()，凸(艸皿艸 )（what the F！？）那該怎麼辦？
if(file)alert("file exiting!"); if(file.files)alert("file.files exiting!"); if(file.files.item(0))alert("file.files.item(0) exiting!"); var url = window.URL.createObjectURL(file.files[0]); if(url)alert("window.URL.createObjectURL(file.files[0]) is work!");
remote模式：不過這個this.files屬性好像是HTML5的，ie8不相容~~~沒試過，不過至少解決我當前的燃眉之急；（還有，那個src）
function ShowImg(file){ if(typeof FileReader == "undefined") alert("瀏覽器不支援FileReader對象！"); else alert("瀏覽器支援FileReader對象！"); var read = new FileReader(); read.readAsDataURL(file[0]); read.onload = function(e){ var src = e.target.result; $("myImg").setAttribute("src",src); }
【問題拓展】
問題一：在domfile模式下，getAsDataURL（）過了Firefox7就不好用了（我不清楚是不是，反正現下的就沒反應），那麼我們加的那個window.URL.createObjectURL(file.files[0]) 是什麼來著呢？
立馬搜一下：
概述
URL.createObjectURL() 靜態方法會建立一個 DOMString，它的 URL 表示參數中的對象。這個 URL 的生命週期和建立它的視窗中的 document 綁定。這個新的URL 對象表示著指定的 File 對象或者 Blob 對象。
文法
objectURL = URL.createObjectURL(blob);
注意
在每次調用createObjectURL()方法時，都會建立一個新的 URL 對象，即使你已經用相同的對象作為參數建立過。當不再需要這些 URL 對象時，每個對象必須通過調用URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，但是為了獲得最佳效能和記憶體使用量狀況，你應該在安全的時機主動釋放掉它們。
相容
| 特性 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本支援 | 8 [1] 23 |
4.0 (2) | 10 | 15 | 6 [1] 7 |
In a Web Worker |
10 [1] 23 |
21 (21) | 11 | 15 | 6 [1] 7 |
問題二：HTML5 提供的一種通過 File API 規範與本地檔案互動的標準方式。
詳請可見：http://www.html5rocks.com/zh/tutorials/file/dndfiles/
該規範通過“本地”檔案系統提供了多種檔案提供者：
File - 獨立檔案；提供唯讀資訊，例如名稱、檔案大小、mimetype 和對檔案控制代碼的引用。FileList - File 對象的類數組序列（考慮 <input type="file" multiple> 或者從案頭拖動目錄或檔案）。Blob - 可將檔案分割為位元組範圍。 要負載檔案，最直接的方法就是使用標準 <input type="file"> 元素。JavaScript 會返回選定的 File 對象 的列表作為 FileList。也可以用別的方法，像是添加監聽：：dropZone.addEventListener(‘dragover‘, handleDragOver, false);（具體自己去搜啦w(?Д?)w）
擷取了 File 引用後，執行個體化 FileReader 對象，以便將其內容讀取到記憶體中。載入結束後，將觸發讀取程式的 onload 事件，而其 result 屬性可用於訪問檔案資料。
FileReader 包括四個非同步讀取檔案的選項：
FileReader.readAsBinaryString(Blob|File) - result 屬性將包含二進位字串形式的 file/blob 資料。每個位元組均由一個 [0..255] 範圍內的整數表示。FileReader.readAsText(Blob|File, opt_encoding) - result 屬性將包含文本字串形式的 file/blob 資料。該字串在預設情況下採用“UTF-8”編碼。使用可選編碼參數可指定其他格式。FileReader.readAsDataURL(Blob|File) - result 屬性將包含編碼為資料網址的 file/blob 資料。FileReader.readAsArrayBuffer(Blob|File) - result 屬性將包含ArrayBuffer 對象形式的 file/blob 資料。對您的 FileReader 對象調用其中某一種讀取方法後，可使用onloadstart、onprogress、onload、onabort、onerror 和 onloadend 跟蹤其進度。
下面的樣本從使用者選擇的內容中過濾掉了圖片，對檔案調用reader.readAsDataURL()，並通過將“src”屬性設為資料網址來呈現縮圖。
好吧，第一次打了這麼多，雖說有許多是copy過來的，不過，小渣邁向這圈還真是艱辛啊~~
關於js的檔案上傳問題~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
