圖片上傳之前檢查大小、尺寸、格式并預覽的js代碼

2019-11-21 01:35:41

字體：大中小

來源：轉載

供稿：網友

下面的代碼，需要保存到本地種執行，在線看不到實際效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>validate before upload by Lance Zhang</title> </head> <body style="font-family:Calibri"> <form name="Myform"> <p> <font color="red" size="6">File type :gif,jpg,jpeg,png,bmp</font></p> <p> File Size limit: <input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit" /> K</p> <p> Image Height Limit: <input type="text" size="4" value="100" name="heightLimit" id="heightLimit" /> </p> <p> Image Width Limit: <input type="text" size="4" value="100" name="widthLimit" id="widthLimit" /> </p> <p> <input type="file" name="photo" onchange="changeSrc(this)" /> Image Preview<img src="https://www.jb51.netabout:blank"%20id="fileChecker"%20name="fileChecker"%20alt="test"%20/>%20</p>%20<p>%20<input%20type="submit"%20value="submit">%20</p>%20</form>%20<script%20type="text/javascript">%20function%20CheckFileSize()%20{%20var%20limit%20=%20document.getElementById("fileSizeLimit").value%20*%201024;%20var%20width%20=%20document.getElementById("widthLimit").value%20;%20var%20height%20=%20document.getElementById("heightLimit").value;%20if%20(oFileChecker.fileSize%20>%20limit)%20{%20alert("FileSize%20:"+oFileChecker.fileSize+"byte--too%20large!");%20}%20else%20{%20alert("FileSize%20:"+oFileChecker.fileSize+"byte--ok");%20}%20if(%20oFileChecker.height>%20height)%20{%20alert("ImageHeight%20:"+oFileChecker.height+"--too%20height!");%20}%20else%20{%20alert("ImageHeight%20:"+oFileChecker.height+"--ok");%20}%20if(oFileChecker.width>%20width)%20{%20alert("ImageWidth%20:"+oFileChecker.width+"--too%20width!");%20}%20else%20{%20alert("ImageWidth%20:"+oFileChecker.width+"--ok");%20}%20return%20false;%20}%20var%20right_type=new%20Array(".gif",".jpg",".jpeg",".png",".bmp"); var oFileChecker = document.getElementById("fileChecker"); function changeSrc(filePicker) { if(!checkImgType(filePicker.value)) { alert("the file type is not correct"); return; } oFileChecker.src = filePicker.value; } oFileChecker.onreadystatechange = function () { if (oFileChecker.readyState == "complete") { CheckFileSize(); } } function checkImgType(fileURL) { var right_typeLen=right_type.length; var imgUrl=fileURL.toLowerCase(); var postfixLen=imgUrl.length; var len4=imgUrl.substring(postfixLen-4,postfixLen); var len5=imgUrl.substring(postfixLen-5,postfixLen); for (i=0;i<right_typeLen;i++) { if((len4==right_type[i])||(len5==right_type[i])) { return true; } } } </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：JavaScript打開客戶端exe文件的代碼

下一篇：javascript腳本編程解決考試分數統計問題