表單

　　先創(chuàng)建一個(gè)file表單域，我們需要用它來瀏覽本地文件,。

<form name="form1" id="form1" method="post" action="upload.php">
<input type="file" name="file1" id="file1" />
</form>

　　試下效果：

判斷文件類型

　　當(dāng)用戶選擇了一個(gè)圖片文件時(shí),，我們希望他能馬上看到這張圖片的縮略圖，以便他能確認(rèn)沒有把自己的光屁股照片當(dāng)作頭像傳到我們的服務(wù)器上^_^,。

　　在預(yù)覽之前我們還得先判斷一下用戶選擇的是不是一個(gè)圖像文件,，如果他想用一個(gè).rar文件做頭像的話我們也需要禮貌地提醒一下。

<form name="form2" id="form2" method="post" action="upload.php">
<input type="file" name="file2" id="file2"
onchange="preview()" />
</form>

　　Javascript函數(shù)實(shí)現(xiàn),，注意我們使用DOM方法getElementById來訪問對象,。不要再使用form

<script type="text/javascript">
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("通過");
}
}
</script>

　　試下效果：

　　這里有一個(gè)問題，如果用戶選擇了名為“fake.jpg.txt”的文件,，這段腳本仍舊會(huì)認(rèn)為這是一個(gè)合法的圖像文件,。一個(gè)可行的解決方案是先把文件名轉(zhuǎn)換成小寫，再取文件路徑的最后4到5位,，判斷一下文件的擴(kuò)展名是否確為我們支持的圖像文件擴(kuò)展名,。不過這種方案略顯笨拙，也沒有什么美感可言,，我們換一種方案：用“正則表達(dá)式”來判斷文件擴(kuò)展名,。

<script type="text/javascript">
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("您選擇的似乎不是圖像文件。");
}
}
</script>

　　看看效果（可以自己創(chuàng)建一個(gè)“fake.jpg.txt”文件試試）：

　　如果從來沒有接觸過正則表達(dá)式，那這段腳本對你可能會(huì)有些晦澀,，不妨Google一把,，看看是否可以先學(xué)習(xí)學(xué)習(xí)這方面的知識(shí)。我可以向你保證花四五個(gè)小時(shí)學(xué)點(diǎn)正則表達(dá)式會(huì)是你最近三個(gè)月內(nèi)作出的最明智選擇^_^,。

　　回到這段腳本上來,，即使你還看不懂正則表達(dá)式那兩行，但整段腳本的美感還是很明顯的：簡潔,、直接,、語義流暢，這與Web標(biāo)準(zhǔn)關(guān)于XHTML的要求是一致的,，與Web設(shè)計(jì)師或開發(fā)者天生的“完美”主義也是一致的,。

　　jjww一大段之后，我們轉(zhuǎn)入重點(diǎn)——

預(yù)覽圖片

　　預(yù)覽功能的基本設(shè)計(jì)思路是很清晰的：創(chuàng)建一個(gè)img元素,，再把文件域的value值賦值給img

<form name="form4" id="form4" method="post" action="#">
 <input type="file" name="file4" id="file4"
onchange="preview4()" />
 <img id="pic4" src="" alt="圖片在此顯示" width="120"/>
</form>
<script type="text/javascript">
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("您選擇的似乎不是圖像文件。");
 }
}
</script>

　　試下效果：

　　如果你用的是Firefox（或Opera）,，可能會(huì)發(fā)現(xiàn)什么也沒有發(fā)生,。是的，很不幸Firefox的安全策略不允許我們顯示一個(gè)用戶的本地圖像文件,。不知道他們?yōu)槭裁匆@么做,，我個(gè)人覺得圖像文件并不會(huì)造成嚴(yán)重的安全性問題。即使是不久前比較熱門的那個(gè)會(huì)引起Windows崩潰的jpeg文件,，要顯示它的前提條件是用戶自己選擇了這個(gè)文件或者你知道這個(gè)文件在用戶硬盤上的準(zhǔn)確路徑,。所以我想這種策略很可能來自于一個(gè)“懶惰”的開發(fā)人員，他并不想多寫一些程序來區(qū)分這個(gè)本地文件是一個(gè)圖像文件還是一個(gè)惡意文件,，F(xiàn)irefox對安全性的要求讓他們有些過于敏感了,。

　　讓Firefox顯示本地文件的唯一辦法就是修改它的默認(rèn)安全策略：

1. 在Firefox的地址欄中輸入“about:config”
2. 繼續(xù)輸入“security.checkloaduri”
3. 雙擊下面列出來的一行文字，把它的值由true改為false

　　然后你可以再試試上面預(yù)覽,，everything works well,！可惜的是我們并不能要求所有的用戶都去修改這個(gè)值（更不用說修改的過程還挺麻煩），所以這對我們來說毫無意義,。我們能做的也許就是接受Firefox不能預(yù)覽本地圖片這種“可笑”的局面,。

用DOM來創(chuàng)建對象

　　在上面的XHTML代碼中，我們?yōu)榱祟A(yù)覽圖片,，事先加入了一個(gè)沒有設(shè)置src的img對象,。除去不美觀、代碼冗余之外,，如果用戶瀏覽器不支持Javascript,，他不僅無法使用這個(gè)功能,，還要接受頁面上一個(gè)永遠(yuǎn)不會(huì)顯示出來的破圖。要解決這個(gè)問題,，我們就需要在“運(yùn)行時(shí)”再生成這個(gè)img對象，途徑還是DOM,。

<form name="form5" id="form5" method="post" action="#">
 <input type="file" name="file5" id="file5"
onchange="preview5()"/>
</form>
<script type="text/javascript">
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("您選擇的似乎不是圖像文件,。");
  }
}
</script>

　　試下效果：

　　這樣就相對比較完美了。我也不解釋上面這些DOM方法的具體意義,，Google一下什么都有了,。DOM和正則表達(dá)式一樣，都是“包你不悔”的實(shí)用技術(shù),，如果你希望更多了解,、深入學(xué)習(xí)、或者順利實(shí)踐Web標(biāo)準(zhǔn),，DOM是不可或缺的,。從我本人最近的體會(huì)來說，Javascript+DOM+CSS蘊(yùn)藏著強(qiáng)大的能量,，就看你怎么釋放它了,。