UDN-企业互联网技术人气社区

板块导航

浏览  : 872
回复  : 2

[原生js] 图片上传之前检查大小、尺寸、格式并预览的js代码

[复制链接]
西北的风的头像 楼主
发表于 2016-12-16 17:08:49 | 显示全部楼层 |阅读模式
        就是在客户端判断上传图片的大小,尺寸,并生成预览图,用JavaScript实现的啊

        下面的代码,需要保存到本地种执行,在线看不到实际效果。
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>validate before upload by Lance Zhang</title>
  5. </head>
  6. <body style="font-family:Calibri">
  7. <form name="Myform">
  8. <p>
  9. <font color="red" size="6">File type :gif,jpg,jpeg,png,bmp</font></p>
  10. <p>
  11. File Size limit:
  12. <input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit" />
  13. K</p>
  14. <p>
  15. Image Height Limit: <input type="text" size="4" value="100" name="heightLimit" id="heightLimit" />
  16. </p>
  17. <p>
  18. Image Width Limit: <input type="text" size="4" value="100" name="widthLimit" id="widthLimit" />
  19. </p>
  20. <p>
  21. <input type="file" name="photo" onchange="changeSrc(this)" />
  22. Image Preview<img src="about:blank" id="fileChecker" name="fileChecker" alt="test" />
  23. </p>
  24. <p>
  25. <input type="submit" value="submit">
  26. </p>
  27. </form>

  28. <script type="text/JavaScript">
  29. function CheckFileSize()
  30. {
  31. var limit = document.getElementById("fileSizeLimit").value * 1024;
  32. var width = document.getElementById("widthLimit").value ;
  33. var height = document.getElementById("heightLimit").value;

  34. if (oFileChecker.fileSize > limit)
  35. {
  36. alert("FileSize :"+oFileChecker.fileSize+"byte--too large!");
  37. }
  38. else
  39. {
  40. alert("FileSize :"+oFileChecker.fileSize+"byte--ok");
  41. }

  42. if( oFileChecker.height> height)
  43. {
  44. alert("ImageHeight :"+oFileChecker.height+"--too height!");
  45. }
  46. else
  47. {
  48. alert("ImageHeight :"+oFileChecker.height+"--ok");
  49. }
  50. if(oFileChecker.width> width)
  51. {
  52. alert("ImageWidth :"+oFileChecker.width+"--too width!");
  53. }
  54. else
  55. {
  56. alert("ImageWidth :"+oFileChecker.width+"--ok");
  57. }
  58. return false;
  59. }

  60. var right_type=new Array(".gif",".jpg",".jpeg",".png",".bmp");

  61. var oFileChecker = document.getElementById("fileChecker");

  62. function changeSrc(filePicker)
  63. {
  64. if(!checkImgType(filePicker.value))
  65. {
  66. alert("the file type is not correct");
  67. return;
  68. }
  69. oFileChecker.src = filePicker.value;
  70. }

  71. oFileChecker.onreadystatechange = function ()
  72. {
  73. if (oFileChecker.readyState == "complete")
  74. {
  75. CheckFileSize();
  76. }
  77. }

  78. function checkImgType(fileURL)
  79. {
  80. var right_typeLen=right_type.length;
  81. var imgUrl=fileURL.toLowerCase();
  82. var postfixLen=imgUrl.length;
  83. var len4=imgUrl.substring(postfixLen-4,postfixLen);
  84. var len5=imgUrl.substring(postfixLen-5,postfixLen);
  85. for (i=0;i<right_typeLen;i++)
  86. {
  87. if((len4==right_type[i])||(len5==right_type[i]))
  88. {
  89. return true;
  90. }
  91. }
  92. }
  93. </script>
  94. </body>
  95. </html>
复制代码

相关帖子

发表于 2016-12-16 17:09:19 | 显示全部楼层
其实js如果遇到web安全类的项目,那就又要做牺牲了,无法读写文件,访问受限。。。哎。。。
使用道具 举报

回复

发表于 2016-12-16 17:09:19 | 显示全部楼层
我完全是被标题<<图片上传之前检查大小、尺寸、格式并预览的js代码>>吸引过来的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部