正文

js前台检测上传图片大小的总结

IP云
IP云V管理员/2 阅读
11/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

最近一直在做上传图片的前端检测，不通过后台就完成这个动作。但实际是，实际效果差强人意。

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的方式 

 var img=new Image();

 obj_img.DYNSRC=obj_file.value;

 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

相关阅读

目录[+]