js前台检测上传图片大小的总结
最近一直在做上传图片的前端检测,不通过后台就完成这个动作。但实际是,实际效果差强人意。
html5的fileApi出来后,对文件的处理才变得方便了些,对它的简单介绍可以看我的前面的博客。现在支持的浏览器有(File API在Firefox,Chrome,Safari和Opera中得到了全面实现.而IE10和Android部分支持这个API.FileReader API在IE10和所有其他桌面浏览器,以及WebKit移动浏览空对空中得到了全面实现,其中包括Android3.0及以上版本)。支持的范围还是蛮好的。
接下来想做ie低版本的兼容,然而纯前台实现真的没有方法。网上方法有几种,理论上似乎可行,但真正在服务器上运行就歇菜了。
1、通过新建img图像对象方式
obj.select();//obj是input上传控件对象 obj.blur(); var nfile = document.selection.createRange().text; var _src = nfile.replace(/\\/g,'/'); //EventUtil.addHandler(img,'load',function(event){//监听图像加载完成 // img.onreadystatechange=function(){//同上 img.onload=function() {//同上 if(img.readyState == "loaded" || img.readyState == "complete") { alert(img.fileSize); } } img.src = _src; document.selection.empty();
这种方式在本地还行,放到服务器上面,ie8上面得到的反馈就是图像对象没有初始化。也就是说服务器端根本就访问不了图片,这也不奇怪了。
2、通过ie activeX方式
var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); var file = fileSystem.GetFile (filePath); //filePath文件路径 fileSize = file.Size;
这种方式服务器ie8得到的反馈是产生Automation 服务器不能创建对象,那是一个坑爹。
3、通过dynsrc的方式
1 var img=new Image(); 2 obj_img.DYNSRC=obj_file.value; 3 filesize = obj_img.fileSize;
这种方式服务器ie8下报没有这个属性,不支持。
这三种方式ie9好像也不行,也没有再测了。
后来用了一个uplodify插件,但这个其实就是后台处理了。这个还是蛮不错的,测试都能检测到。
ps:
知乎上面的讨论差不多就是js检测大小的现状,
http://www.zhihu.com/question/21073708
还有2个网页可以作为参考,对新手有不少的帮助:
http://www.iteye.com/topic/137984
http://www.iteye.com/problems/38339