订单拆单在电商网站建设,黄山seo,学用mvc做网站,做百度微信小程序都有哪些网站2019独角兽企业重金招聘Python工程师标准 需求分析#xff1a; 在做上传图片的时候#xff0c;如果不限制上传图片大小#xff0c;后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢#xff1f;有两种方式#xff1a; 1)后台处理#xff1a; 也就是… 2019独角兽企业重金招聘Python工程师标准 需求分析 在做上传图片的时候如果不限制上传图片大小后果非常的严重。那么我们怎样才可以解决一个棘手的问题呢有两种方式 1)后台处理 也就是AJAX POST提交到后台把图片上传到服务器上然后获得该图片大小做处理。 2)前台处理 也就是利用Javascript获取该图片大小。 显然第一种方式很不好。因为需要把文件先上传到服务器上如果文件很大的话在加上网不是很快需要等待好长时间治标不治本。 功能解析 在这里我只介绍IE与FireFox两个浏览器的不同做法。 IE6 关键字 fileSize onreadystatechange complete 在IE6中可以通过Img对象的fileSize 属性获得文件大小但这个fileSize属性的正确值是建立在onreadystatechange 事件的complete 中也就是 img src classimg
onreadystatechangeJavascript: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);
input typefile nameuploadImg
onchangeJavascript:checkFileChange(this);
size12/
function checkFileChange(obj) { var img document.getElementById(img); img.src obj.files[0].getAsDataUrl(); alert(obj.files[0].fileSize);
} 以上是两个不同浏览器的处理方式,那么怎么把他们融和到一起呢我在下面会将我做的小例子贴出来其中里面我使用JQuery方便与获取对象 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlnshttp://www.w3.org/1999/xhtml xml:langzh langzh dirltrhead meta http-equivContent-Type contenttext/html; charsetutf-8 / script typetext/javascript srclib/jquery-1.3.2.min.js /scripttitle检查上传图片大小/titlestyle typetext/css .img {width:136px;height:102px;}.imgError{border:3px solid red;}/stylescript typetext/javascript//限制上传图片大小100Kvar 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[nameuploadImg])[0];if (file.files[0].size 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[nameusrname]), email $(input:text[nameemail]), img $(.img),file $(input:file[nameuploadImg]),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;} /script /headbody form namefrm methodpostp iderrorTips /p table cellpadding1 cellspacing0 width350px border1trtdlabel姓名/label/td tdinput typetext nameusrname maxlength50//td /trtr tdlabel性别/label/tdtdinput typeradio namesex value0/男input typeradio namesex value0/女/td/trtrtdlabel邮件/label/tdtdinput typetext nameemail maxlength100//td /trtr tdlable图像/label/td td table cellpadding0 cellspacing0 classimgTabletrtdimg srcimgs/nophoto.gif srcimgs/nophoto.gif classimg alt头像 onerrorJavascript:errorImg(this);onreadystatechangeJavascript:sizeCheck(this);/ /td/trtr tdinput typefile nameuploadImg onchangeJavascript:checkFileChange(this);size12//td /tr /tabletabletr td colspan2a hrefJavascript:commit();relexternal nofollow relexternal nofollowhrefJavascript:commit();relexternal nofollow relexternal nofollow 注册/a/td/tr /table/form /body/html 转载于:https://my.oschina.net/fuckBAT/blog/423734
