视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Javascript验证上传图片大小[客户端]_jquery
2020-11-27 20:43:52 责编:小采
文档
 需求分析:
在做上传图片的时候,如果不上传图片大小,后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢?有两种方式:
1)后台处理: 也就是AJAX POST提交到后台,把图片上传到服务器上,然后获得该图片大小做处理。
2)前台处理: 也就是利用Javascript获取该图片大小。
显然第一种方式,很不好。因为需要把文件先上传到服务器上,如果文件很大的话,在加上网不是很快,需要等待好长时间,治标不治本。
功能解析:
在这里我只介绍IE与FireFox两个浏览器的不同做法。
IE6:
关键字: fileSize onreadystatechange complete
在IE6中可以通过Img对象的fileSize 属性获得文件大小,但这个fileSize属性的正确值是建立在onreadystatechange 事件的complete 中,也就是
代码如下:
onreadystatechange="Javascript:sizeCheck(this);">
function sizeCheck(img) {

if(img.readyState == "complete") {
alert(img.fileSize);
}
}

FireFox3.0:
关键字: getAsDataURL() fileSize
在FireFox中处于安全的考虑,无法获得上传图片的完整路径,只能获得图片名称。但浏览器提供nsIDOMFile這樣一個接口,所以需要通过getAsDataURL()获得处理过后的路径,但该路径不影响图片src显示。
nsIDOMFile接口:
DOMString getAsBinary();
DOMString getAsDataURL();
DOMString getAsText(in DOMString encoding);
代码如下:
onchange="Javascript:checkFileChange(this);"
size="12"/>
function checkFileChange(obj) {
var img = document.getElementById("img");
img.src = obj.files[0].getAsDataUrl();
alert(obj.files[0].fileSize);
}

以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢?我在下面会将我做的小例子贴出来,其中里面我使用JQuery,方便与获取对象。
代码如下:





检查上传图片大小


//上传图片大小100K
var MAXSIZE = 100 * 1024;

//图片大小信息
var ERROR_IMGSIZE = "图片大小不能超过100K";
//默认图片
var NOPHOTO = "imgs/nophoto.gif";

//图片是否合格
var isImg = true;
/**
* Input file onchange事件
* @params obj file对象
* @return void
**/
function checkFileChange(obj) {

//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
var img = $(".img").get(0);
var file = obj.value;
var exp = /.\.jpg|.\.gif|.\.png|.\.bmp/i;
if (exp.test(file)) {//验证格式
if($.browser.msie) {//判断是否是IE
img.src = file;
} else {
img.src = obj.files[0].getAsDataURL();
sizeCheck(img);
}

} else {
img.src = NOPHOTO;
$(".imgTable").addClass("imgError");
updateTips("图片格式不正确");
isImg = false;
}

}
/**
* sizeCheck 检查图片大小
* @params img 图片对象
* @return void
**/
function sizeCheck(img) {
//初始化设置
$(".imgTable").removeClass("imgError");
updateTips("");
if ($.browser.msie) {//查看是否是IE
if(img.readyState == "complete") {
if (img.fileSize > MAXSIZE) {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}else {
isImg = true;
}

}else {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}

} else {
var file = $("input:file[name='uploadImg']")[0];

if (file.files[0].fileSize > MAXSIZE) {
$(".imgTable").addClass("imgError");
updateTips(ERROR_IMGSIZE);
isImg = false;
}else {
isImg = true;
}

}
}

/**
* updateTips 注册错误信息显示
* @params str 显示内容
* @return void
**/
function updateTips(str) {
$("p#errorTips").text(str);
}
/**
* commit 注册提交
* @return void
**/
function commit() {

var isCommit = true;
var usrname = $("input:text[name='usrname']"),
email = $("input:text[name='email']"),
img = $(".img"),
file = $("input:file[name='uploadImg']"),
frm = document.frm;

isCommit = isCommit && isImg;

if(isCommit) {
frm.action = "about:blank";
frm.submit();
}
}
/**
* errorImg 图片错误显示
* @params img 图片对象
* @return void
**/
function errorImg(img) {
img.src = NOPHOTO;
}







下载本文
显示全文
专题