<!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）
新版本的火狐7不認識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過來的，不過，小渣邁向這圈還真是艱辛啊~~