国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

表單

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

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

　　試下效果：

判斷文件類型

　　當(dāng)用戶選擇了一個(gè)圖片文件時(shí)，我們希望他能馬上看到這張圖片的縮略圖，以便他能確認(rèn)沒(méi)有把自己的光屁股照片當(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來(lái)訪問(wèn)對(duì)象。不要再使用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("通過(guò)");}}</script>

　　試下效果：

　　這里有一個(gè)問(wèn)題，如果用戶選擇了名為“fake.jpg.txt”的文件，這段腳本仍舊會(huì)認(rèn)為這是一個(gè)合法的圖像文件。一個(gè)可行的解決方案是先把文件名轉(zhuǎn)換成小寫(xiě)，再取文件路徑的最后4到5位，判斷一下文件的擴(kuò)展名是否確為我們支持的圖像文件擴(kuò)展名。不過(guò)這種方案略顯笨拙，也沒(méi)有什么美感可言，我們換一種方案：用“正則表達(dá)式”來(lái)判斷文件擴(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("通過(guò)");}else{alert("您選擇的似乎不是圖像文件。");}}</script>

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

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

　　回到這段腳本上來(lái)，即使你還看不懂正則表達(dá)式那兩行，但整段腳本的美感還是很明顯的：簡(jiǎn)潔、直接、語(yǔ)義流暢，這與Web標(biāo)準(zhǔn)關(guān)于XHTML的要求是一致的，與Web設(shè)計(jì)師或開(kāi)發(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)什么也沒(méi)有發(fā)生。是的，很不幸Firefox的安全策略不允許我們顯示一個(gè)用戶的本地圖像文件。不知道他們?yōu)槭裁匆@么做，我個(gè)人覺(jué)得圖像文件并不會(huì)造成嚴(yán)重的安全性問(wèn)題。即使是不久前比較熱門(mén)的那個(gè)會(huì)引起Windows崩潰的jpeg文件，要顯示它的前提條件是用戶自己選擇了這個(gè)文件或者你知道這個(gè)文件在用戶硬盤(pán)上的準(zhǔn)確路徑。所以我想這種策略很可能來(lái)自于一個(gè)“懶惰”的開(kāi)發(fā)人員，他并不想多寫(xiě)一些程序來(lái)區(qū)分這個(gè)本地文件是一個(gè)圖像文件還是一個(gè)惡意文件，F(xiàn)irefox對(duì)安全性的要求讓他們有些過(guò)于敏感了。

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

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

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

用DOM來(lái)創(chuàng)建對(duì)象

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

　　試下效果：

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