1.先建立一個file表單域，我們需要用它來浏覽本地檔案。
2.試下效果：
判斷檔案類型：
當使用者選擇了一個圖檔檔案時，希望他能馬上看到這張圖檔的縮略圖，以便他能确認沒有把自己的光屁股照片當作頭像傳到伺服器上^_^。
在預覽之前還得先判斷一下使用者選擇的是不是一個圖像檔案，如果他想用一個.rar檔案做頭像的話我們也需要禮貌地提醒一下。
οnchange="preview()" />
Javascript函數實作，注意使用DOM方法getElementById來通路對象。不要再使用form
和input的name屬性來通路對象了，隻有IE才這麼幹。
function preview2(){
var x = document.getElementById("file2");
if(!x || !x.value) return;
if(x.value.indexOf(".jpg")<0
&& x.value.indexOf(".jpeg")<0
&& x.value.indexOf(".gif")<0){
alert("您選擇的似乎不是圖像檔案。");
}else{
alert("通過");
}
}
3.試下效果：
這裡有一個問題，如果使用者選擇了名為“fake.jpg.txt”的檔案，這段腳本仍舊會認為這是一個合法的圖像檔案。一個可行的解決方案是先 把檔案名轉換成小寫，再取檔案路徑的最後4到5位，判斷一下檔案的擴充名是否确為支援的圖像檔案擴充名。不過這種方案略顯笨拙，也沒有什麼美感可言， 我們換一種方案：用“正規表達式”來判斷檔案擴充名。
function preview3(){
var x = document.getElementById("file3");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
alert("通過");
}else{
alert("您選擇的似乎不是圖像檔案。");
}
}
4.看看效果(可以自己建立一個“fake.jpg.txt”檔案試試)：
回到這段腳本上來，即使你還看不懂正規表達式那兩行，但整段腳本的美感還是很明顯的：簡潔、直接、語義流暢，這與Web标準關于XHTML的要求是一緻的，與Web設計師或開發者天生的“完美”主義也是一緻的。
jjww一大段之後，轉入重點——預覽圖檔
預覽功能的基本設計思路是很清晰的：建立一個img元素，再把檔案域的value值指派給img
元素的src屬性。
οnchange="preview4()" />
function preview4(){
var x = document.getElementById("file4");
var y = document.getElementById("pic4");
if(!x || !x.value || !y) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
y.src = "file://localhost/" + x.value;
}else{
alert("您選擇的似乎不是圖像檔案。");
}
}
5.試下效果：
如果用的是Firefox(或Opera)，可能會發現什麼也沒有發生。是的，很不幸Firefox的安全政策不允許顯示一個使用者的本地 圖像檔案。不知道為什麼要這麼做，個人覺得圖像檔案并不會造成嚴重的安全性問題。即使是不久前比較熱門的那個會引起Windows崩潰的jpeg文 件，要顯示它的前提條件是使用者自己選擇了這個檔案或者你知道這個檔案在使用者硬碟上的準确路徑。是以我想這種政策很可能來自于一個“懶惰”的開發人員，并 不想多寫一些程式來區分這個本地檔案是一個圖像檔案還是一個惡意檔案，Firefox對安全性的要求讓他們有些過于敏感了。
讓Firefox顯示本地檔案的唯一辦法就是修改它的預設安全政策：
在Firefox的位址欄中輸入“about:config”
繼續輸入“security.checkloaduri”
輕按兩下下面列出來的一行文字，把它的值由true改為false
然後你可以再試試上面預覽，everything works well！可惜的是并不能要求所有的使用者都去修改這個值(更不用說修改的過程還挺麻煩)，是以毫無意義。我們能做的也許就是接受Firefox不能預覽本地圖檔這種“可笑”的局面。
用DOM來建立對象
在上面的XHTML代碼中，為了預覽圖檔，事先加入了一個沒有設定src的img對象。除去不美觀、代碼備援之外，如果使用者浏覽器不支援 Javascript，不僅無法使用這個功能，還要接受頁面上一個永遠不會顯示出來的破圖。要解決這個問題，就需要在“運作時”再生成這個img對 象，途徑還是DOM。
οnchange="preview5()"/>
function preview5(){
var x = document.getElementById("file5");
if(!x || !x.value) return;
var patn = /\.jpg$|\.jpeg$|\.gif$/i;
if(patn.test(x.value)){
var y = document.getElementById("img5");
if(y){
y.src = ‘file://localhost/‘ + x.value;
}else{
var img=document.createElement(‘img‘);
img.setAttribute(‘src‘,‘file://localhost/‘+x.value);
img.setAttribute(‘width‘,‘120‘);
img.setAttribute(‘height‘,‘90‘);
img.setAttribute(‘id‘,‘img5‘);
document.getElementById(‘form5‘).appendChild(img);
}
}else{
alert("您選擇的似乎不是圖像檔案。");
}
}
6.試下效果：
這樣就相對比較完美了。DOM和正規表達式一樣，都是“包你不悔”的實 用技術，如果你希望更多了解、深入學習、或者順利實踐Web标準，DOM是不可或缺的。從本人最近的體會來說，Javascript+DOM+CSS蘊 藏着強大的能量，就看怎麼釋放它了。
7.最後帖上JQUERY的上傳預覽代碼：
de>
$(function(){
var ei = $("#large");
ei.hide();
$("#img1").mousemove(function(e){
ei.css({top:e.pageY,left:e.pageX}).html(‘
‘).show();
}).mouseout( function(){
ei.hide("slow");
})
$("#f1").change(function(){
$("#img1").attr("src","file:///"+$("#f1").val());
})
});
#large{position:absolute;display:none;z-index:999;}
de>