这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
就是在客户端判断上传图片的大小,尺寸,并生成预览图,用 JavaScript 实现的啊
下面的代码,需要保存到本地种执行,在线看不到实际效果。
- <!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>
- File type :gif,jpg,jpeg,png,bmp</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 class="img-responsive" src="about:blank" name="fileChecker" data-src="" />
- </p>
- <p>
- <input type="submit" value="submit">
- </p>
- </form>
- <script type="text/javascript">
- function CheckFileSize()
- {
- var limit = document.getElementById("fileSizeLimit").value * 1024;
- var width = document.getElementById("widthLimit").value ;
- var height = document.getElementById("heightLimit").value;
- if (oFileChecker.fileSize > limit)
- {
- alert("FileSize :"+oFileChecker.fileSize+"byte--too large!");
- }
- else
- {
- alert("FileSize :"+oFileChecker.fileSize+"byte--ok");
- }
- if( oFileChecker.height> height)
- {
- alert("ImageHeight :"+oFileChecker.height+"--too height!");
- }
- else
- {
- alert("ImageHeight :"+oFileChecker.height+"--ok");
- }
- if(oFileChecker.width> width)
- {
- alert("ImageWidth :"+oFileChecker.width+"--too width!");
- }
- else
- {
- alert("ImageWidth :"+oFileChecker.width+"--ok");
- }
- return false;
- }
- var right_type=new Array(".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>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0701/287840.html