网站内容 内链,广告设计公司员工荣誉证书,WordPress分享到笔记,江阴做网站的地方今天在做图片上传的小功能#xff0c;使用了一个kissy上传组件。很好奇它是如何在图片上传前#xff0c;检测到图片的大小和尺寸的#xff1f;我们来写个小实例实现一下吧如何读取图片的size首先#xff0c;原生input file控件有个files属性#xff0c;该属性是一个数组。…今天在做图片上传的小功能使用了一个kissy上传组件。很好奇它是如何在图片上传前检测到图片的大小和尺寸的我们来写个小实例实现一下吧如何读取图片的size首先原生input file控件有个files属性该属性是一个数组。数组中的元素有以下属性lastModifiedDatenamesizetypewebkitRelativePath如图这样的话我们就可以检测到sizevar fileData file.files[0];var size fileData.size; //注意这里读到的是字节数var isAllow false;var maxSize Max_Size;maxSize maxSize * 1024; //转化为字节isAllow size maxSize;兼容性ie9下读不到input file.files这个属性。思考怎么办如何读取图片的width,height图片真实的宽度和高度可以通过实例化Image对象、加载src 来获取。兼容性IE下使用滤镜来处理图片尺寸控制全部代码测试//http://www.oschina.net/code/snippet_819257_22844//https://github.com/kissygalleryteam/uploader/blob/master/3.0.1/build/plugins/auth/auth.jsKISSY.use(core,function(S){var $ S.all, D S.DOM;var Max_Size 2000; //2Mvar Max_Width 100; //100pxvar Max_Height 200; //200px$(#submit).on(click,function(ev){ev.halt();var fileEl D.get(#uploader);console.log(fileEl.files);testMaxSize(fileEl);testWidthHeight(fileEl);})function testMaxSize(file){if(file.files file.files[0]){var fileData file.files[0];var size fileData.size; //注意这里读到的是字节数var isAllow false;if(!size) isAllow false;var maxSize Max_Size;maxSize maxSize * 1024; //转化为字节isAllow size maxSize;showTip1(isAllow);}else{/*... ie9下用iframe上传*//*// 或者用以面的方式实现// var img new Image();// 再用img.srcfilepath,再用img.fileSize用取这里不写啦读者自行实践一下*/}}function testWidthHeight(file){var isAllow false;debugger;if(file.files file.files[0]){var fileData file.files[0];//读取图片数据var reader new FileReader();reader.onload function (e) {var data e.target.result;//加载图片获取图片真实宽度和高度var image new Image();image.οnlοadfunction(){var width image.width;var height image.height;isAllow width Max_Width height Max_Height;showTip2(isAllow);};image.src data;};reader.readAsDataURL(fileData);}else{//IE下使用滤镜来处理图片尺寸控制//文件name中IE下是完整的图片本地路径var input D.get(#uploader);//var input uploader.get(target).all(input).getDOMNode();input.select();//确保IE9下不会出现因为安全问题导致无法访问input.blur();var src document.selection.createRange().text; var img $().appendTo(body).getDOMNode();img.filters.item(DXImageTransform.Microsoft.AlphaImageLoader).src src;var width img.offsetWidth;var height img.offsetHeight;$(img).remove();isAllow width Max_Width height Max_Height;showTip2(isAllow);}}function showTip1(isAllow){var tipEl D.get(#tip1),html ;if(isAllow){html 大小通过;}else{html 大小未通过要求 Max_Size ;}D.html(tipEl,html);}function showTip2(isAllow){var tipEl D.get(#tip2),html ;if(isAllow){html 宽高通过;}else{html 宽高未通过要求width: Max_Width , height: Max_Height;}D.html(tipEl,html);}})
