來源：http://www.cnblogs.com/conquer/archive/2008/03/22/1117367.html

?

<input id="file" type="file" οnfοcus="javascript:ShowImage(this.value,document.getElementById('img'))"> <br /> <img id="img" STYLE="visibility:hidden" mce_STYLE="visibility:hidden" height="100px" width="100px"> <mce:script language="javascript" type="text/javascript"><!--function ShowImage(value,img){//alert(value);//檢測盤符//alert(value.indexOf(':'));//檢測文件是否有擴展名//alert(value.length-value.lastIndexOf('.'));//取文件擴展名//alert(value.substr(value.length-3,3));//檢測文件擴展名是否合法//alert(CheckExt(value.substr(value.length-3,3)));if(value.length>5&&value.indexOf(':')==1&& (value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3))){img.src=value;img.alt="本地圖片預覽";img.style.visibility="visible";}else{img.style.visibility="hidden";}}//檢查擴展名是否合法,合法返回Truefunction CheckExt(ext){//這里設置允許的擴展名var AllowExt="jpg|gif|jpeg|png|bmp";var ExtOK=false;var ArrayExt;if(AllowExt.indexOf('|')!=-1){ArrayExt=AllowExt.split('|');for(i=0;i<ArrayExt.length;i++){if(ext.toLowerCase()==ArrayExt[i]){ExtOK=true;break;}}}else{ArrayExt=AllowExt;if(ext.toLowerCase()==ArrayExt){ExtOK=true;}}return ExtOK;} // --></mce:script>

總結

以上是生活随笔為你收集整理的js预览待上传的本地图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。