资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
图片上传之前检查大小、尺寸、格式并预览的js代码
下面的代码,需要保存到本地种执行,在线看不到实际效果。
<!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="about:blank" _ewebeditor_ta_src="about%3Ablank" id="fileChecker" name="fileChecker" alt="test" /> </p> <p> <input type="submit" value="submit"> </p> </form> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20CheckFileSize()%20%0D%0A%7B%20%0D%0Avar%20limit%20%3D%20document.getElementById(%22fileSizeLimit%22).value%20*%201024%3B%20%0D%0Avar%20width%20%3D%20document.getElementById(%22widthLimit%22).value%20%3B%20%0D%0Avar%20height%20%3D%20document.getElementById(%22heightLimit%22).value%3B%20%0D%0A%0D%0Aif%20(oFileChecker.fileSize%20%3E%20limit)%20%0D%0A%7B%20%0D%0Aalert(%22FileSize%20%3A%22%2BoFileChecker.fileSize%2B%22byte--too%20large!%22)%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Aalert(%22FileSize%20%3A%22%2BoFileChecker.fileSize%2B%22byte--ok%22)%3B%20%0D%0A%7D%20%0D%0A%0D%0Aif(%20oFileChecker.height%3E%20height)%20%0D%0A%7B%20%0D%0Aalert(%22ImageHeight%20%3A%22%2BoFileChecker.height%2B%22--too%20height!%22)%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Aalert(%22ImageHeight%20%3A%22%2BoFileChecker.height%2B%22--ok%22)%3B%20%0D%0A%7D%20%0D%0Aif(oFileChecker.width%3E%20width)%20%0D%0A%7B%20%0D%0Aalert(%22ImageWidth%20%3A%22%2BoFileChecker.width%2B%22--too%20width!%22)%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Aalert(%22ImageWidth%20%3A%22%2BoFileChecker.width%2B%22--ok%22)%3B%20%0D%0A%7D%20%0D%0Areturn%20false%3B%20%0D%0A%7D%20%0D%0A%0D%0Avar%20right_type%3Dnew%20Array(%22.gif%22%2C%22.jpg%22%2C%22.jpeg%22%2C%22.png%22%2C%22.bmp%22)%3B%20%0D%0A%0D%0Avar%20oFileChecker%20%3D%20document.getElementById(%22fileChecker%22)%3B%20%0D%0A%0D%0Afunction%20changeSrc(filePicker)%20%0D%0A%7B%20%0D%0Aif(!checkImgType(filePicker.value))%20%0D%0A%7B%20%0D%0Aalert(%22the%20file%20type%20is%20not%20correct%22)%3B%20%0D%0Areturn%3B%20%0D%0A%7D%20%0D%0AoFileChecker.src%20%3D%20filePicker.value%3B%20%0D%0A%7D%20%0D%0A%0D%0AoFileChecker.onreadystatechange%20%3D%20function%20()%20%0D%0A%7B%20%0D%0Aif%20(oFileChecker.readyState%20%3D%3D%20%22complete%22)%20%0D%0A%7B%20%0D%0ACheckFileSize()%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20checkImgType(fileURL)%20%0D%0A%7B%20%0D%0Avar%20right_typeLen%3Dright_type.length%3B%20%0D%0Avar%20imgUrl%3DfileURL.toLowerCase()%3B%20%0D%0Avar%20postfixLen%3DimgUrl.length%3B%20%0D%0Avar%20len4%3DimgUrl.substring(postfixLen-4%2CpostfixLen)%3B%20%0D%0Avar%20len5%3DimgUrl.substring(postfixLen-5%2CpostfixLen)%3B%20%0D%0Afor%20(i%3D0%3Bi%3Cright_typeLen%3Bi%2B%2B)%20%0D%0A%7B%20%0D%0Aif((len4%3D%3Dright_type%5Bi%5D)%7C%7C(len5%3D%3Dright_type%5Bi%5D))%20%0D%0A%7B%20%0D%0Areturn%20true%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程