图片上传之前检查大小、尺寸、格式并预览的js代码- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 图片上传之前检查大小、尺寸、格式并预览的js代码

Javascript: ExtJS 2.0实用简明教程之ExtJS版的Hello; ExtJS 2.0 实用简明教程之布局概述; ExtJS 2.0实用简明教程之应用ExtJS; ExtJS 2.0实用简明教程之获得ExtJS; javascript 扫雷游戏; ExtJS 2.2.1的grid控件在ie6中的显示问题; jquery-1.2.6得到焦点与失去焦点的写法; 一组JS创建和操作表格的函数集合; extjs fckeditor集成代码; jquery 实现京东商城、凡客商城的图片放大效果; jQuery 技巧大全(新手入门篇); JavaScript设置FieldSet展开与收缩; event.keyCode键码值表附只能输入特定的字符串代码; js 图片缩放特效代码; jquery(1.3.2) 高亮选中图片边框; js 使用方法与函数总结; Js 本页面传值实现代码; javascript获取div的内容精华篇; innerText innerHTML的用法以及注意事项 [推荐]; jquery 圆角遮罩图片实现图片圆角

No. « ‹ 218 219 220 221 › »

技术文章搜索

关键字

Javascript 中的图片上传之前检查大小、尺寸、格式并预览的js代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 345 ::

收藏到网摘: n/a

javascript脚本编程解决考试分数统计问题 JavaScript打开客户端exe文件的代码

就是在客户端判断上传图片的大小，尺寸，并生成预览图，用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">
<font color="red" size="6">File type :gif,jpg,jpeg,png,bmp</font>
File Size limit:
<input type="text" size="4" value="100" name="fileSizeLimit" id="fileSizeLimit" />
K
Image Height Limit: <input type="text" size="4" value="100" name="heightLimit" id="heightLimit" />
Image Width Limit: <input type="text" size="4" value="100" name="widthLimit" id="widthLimit" />
<input type="file" name="photo" onchange="changeSrc(this)" />
Image Preview<img src="about:blank" id="fileChecker" name="fileChecker" alt="test" />
<input type="submit" value="submit">
</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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript脚本编程解决考试分数统计问题 JavaScript打开客户端exe文件的代码

Javascript 中的 图片上传之前检查大小、尺寸、格式并预览的js代码

评论 (0) All

Javascript 中的图片上传之前检查大小、尺寸、格式并预览的js代码