欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

表單

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

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

　　試下效果：

判斷文件類(lèi)型

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

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

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

　　Javascript函數實(shí)現，注意我們使用DOM方法getElementById來(lái)訪(fǎng)問(wèn)對象。不要再使用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)題，如果用戶(hù)選擇了名為“fake.jpg.txt”的文件，這段腳本仍舊會(huì )認為這是一個(gè)合法的圖像文件。一個(gè)可行的解決方案是先把文件名轉換成小寫(xiě)，再取文件路徑的最后4到5位，判斷一下文件的擴展名是否確為我們支持的圖像文件擴展名。不過(guò)這種方案略顯笨拙，也沒(méi)有什么美感可言，我們換一種方案：用“正則表達式”來(lái)判斷文件擴展名。

<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ò)正則表達式，那這段腳本對你可能會(huì )有些晦澀，不妨Google一把，看看是否可以先學(xué)習學(xué)習這方面的知識。我可以向你保證花四五個(gè)小時(shí)學(xué)點(diǎn)正則表達式會(huì )是你最近三個(gè)月內作出的最明智選擇^_^。

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

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

預覽圖片

　　預覽功能的基本設計思路是很清晰的：創(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ā)現什么也沒(méi)有發(fā)生。是的，很不幸Firefox的安全策略不允許我們顯示一個(gè)用戶(hù)的本地圖像文件。不知道他們?yōu)槭裁匆@么做，我個(gè)人覺(jué)得圖像文件并不會(huì )造成嚴重的安全性問(wèn)題。即使是不久前比較熱門(mén)的那個(gè)會(huì )引起Windows崩潰的jpeg文件，要顯示它的前提條件是用戶(hù)自己選擇了這個(gè)文件或者你知道這個(gè)文件在用戶(hù)硬盤(pán)上的準確路徑。所以我想這種策略很可能來(lái)自于一個(gè)“懶惰”的開(kāi)發(fā)人員，他并不想多寫(xiě)一些程序來(lái)區分這個(gè)本地文件是一個(gè)圖像文件還是一個(gè)惡意文件，Firefox對安全性的要求讓他們有些過(guò)于敏感了。

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

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

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

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

　　在上面的XHTML代碼中，我們?yōu)榱祟A覽圖片，事先加入了一個(gè)沒(méi)有設置src的img對象。除去不美觀(guān)、代碼冗余之外，如果用戶(hù)瀏覽器不支持Javascript，他不僅無(wú)法使用這個(gè)功能，還要接受頁(yè)面上一個(gè)永遠不會(huì )顯示出來(lái)的破圖。要解決這個(gè)問(wè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和正則表達式一樣，都是“包你不悔”的實(shí)用技術(shù)，如果你希望更多了解、深入學(xué)習、或者順利實(shí)踐Web標準，DOM是不可或缺的。從我本人最近的體會(huì )來(lái)說(shuō)，Javascript+DOM+CSS蘊藏著(zhù)強大的能量，就看你怎么釋放它了。