JavaScript 图片上传预览效果

admin

2010年5月1日 2:56 本文热度 7640

图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。
但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。
不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。
例如ie7/ie8的滤镜预览法，firefox 3的getasdataurl方法。
但在opera、safari和chrome还是没有办法实现本地预览，只能通过后台来支持预览。
在研究了各种预览方法后，作为总结，写了这个程序，跟大家一起分享。
上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果的。
兼容：ie6/7/8, firefox 3.5.5
后台支持下还兼容：opera 10.10, safari 4.0.4, chrome 3.0

效果预览

.perview {width:600px;background:#fff; border-collapse:collapse;}
.perview td, .perview th {padding:5px;border:1px solid #ccc;}
.perview th {background-color:#f0f0f0; height:20px;}
.perview a:link, .perview a:visited, .perview a:hover, .perview a:active {color:#00f;}
.perview table{ width:100%;border-collapse:collapse;}

选择文件
预览图

/*file样式*/
#idpicfile {
width:80px;height:20px;overflow:hidden;position:relative;
background:url(http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_addfile.jpg) center no-repeat;
}
#idpicfile input {
font-size:20px;cursor:pointer;
position:absolute;right:0;bottom:0;
filter:alpha(opacity=0);opacity:0;
outline:none;hide-focus:expression(this.hidefocus=true);
}

选择图片：

文件路径
预览图
操作

移除

移除

ps：兼容opera, safari和chrome需要后台支持，请下载实例测试。

程序说明

【基本原理】

图片预览主要包括两个部分：从file表单控件获取图像数据，根据数据显示预览图像。
程序的file和img属性就是用来保存file控件和显示预览图像的容器的，而img还必须是img元素。

程序有以下几种预览方式：
simple模式：直接从file的value获取图片路径来显示预览，适用于ie6；
filter模式：通过selection获取file的图片路径，再用滤镜来显示预览，适用于ie7/8；
domfile模式：调用file的getasdataurl方法获取data uri数据来显示预览，适用于ff3；
remote模式：最后的办法，把file提交后台处理后返回图片数据来显示预览，全适用。

程序定义时就自动根据浏览器设置mode属性：

imagepreview.mode = $$b.ie7 || $$b.ie8 ? "filter" :
$$b.firefox ? "domfile" :
$$b.opera || $$b.chrome || $$b.safari ? "remote" : "simple";

如果用能力检测会比较麻烦，所以只用了浏览器检测。
由于浏览器对应的默认模式是不会变的，这个值会保存到函数属性中作为公用属性。
ps：ie6也可以用filter模式，不过它有更好的simple模式。

【获取数据】

调用preview方法，就会执行预览程序：

if ( this.file && false !== this.oncheck() ) {
this._preview( this._getdata() );
}

在通过检测后，再调用_getdata获取数据，并作为_preview的参数进入下一步。

程序初始化时就会根据mode来设置_getdata数据获取程序：

this._getdata = this._getdatafun(opt.mode);

mode的默认值是imagepreview.mode，也可以在可选参数中自定义。
由于兼容性问题，一般应保留默认值，除非是使用全兼容的remote模式。

在_getdatafun里面，根据mode返回数据获取程序：

代码
switch (mode) {
case "filter" :
return this._filterdata;
case "domfile" :
return this._domfiledata;
case "remote" :
return this._remotedata;
case "simple" :
default :
return this._simpledata;
}

不同的模式有不同的数据获取程序：
滤镜数据获取程序：

this.file.select();
try{
return document.selection.createrange().text;
} finally { document.selection.empty(); }

一般用在ie7/8，在file控件select后再通过selection对象获得文件本地路径。
此时file控件不能隐藏，否则不能被select，不过一般能选择文件就肯定能被select了。
确实要隐藏也可以在获取数据之后再隐藏。

domfile数据获取程序：

return this.file.files[0.getasdataurl();

用getasdataurl从file控件获取数据，这个方法暂时只有ff3支持。

远程数据获取程序：

this._setupload();
this._upload && this._upload.upload();

用_upload上传文件对象把数据提交后台，根据返回的数据再显示。
这个方法不属于本地预览，是没有办法中的办法。

一般数据获取程序：

return this.file.value;

最原始的方法，现在只有ie6还支持从file的value直接获取本地路径。

获取数据后，作为_preview预览程序的参数，再进行处理：

if ( !!data && data !== this._data ) {
this._data = data; this._show();
}

首先排除空值或相同值的情况，再执行_show程序进行显示预览，其中_data属性用来保存当前的图片数据。
图片使用data uri数据时可能会设置一个很大的src值，在ie8获取很大的src值会出现“无效指针”的错误。
使用_data属性保存这个值可以避免从src取值而触发这个错误。

远程数据获取程序没有返回值，因为它需要等待返回数据，在_preview中会自动排除。

【显示预览】

程序初始化时就会根据mode来设置_show预览显示程序：

this._show = opt.mode !== "filter" ? this._simpleshow : this._filtershow;

除了filter模式，都是使用_simpleshow显示程序来显示预览图片的。
里面会先调用_simplepreload方法设置一般预载图片对象：

代码
if ( !this._preload ) {
var preload = this._preload = new image(), othis = this,
onload = function(){ othis._imgshow( othis._data, this.width, this.height ); };
this._onload = function(){ this.onload = null; onload.call(this); }
preload.onload = $$b.ie ? this._onload : onload;
preload.onerror = function(){ othis._error(); };
} else if ( $$b.ie ) {
this._preload.onload = this._onload;
}

预载图片对象保存在_preload属性中，主要用来判断图像能否加载成功并获取图片原始尺寸。
要实现这些功能使用image对象就足够了。
在onload中执行_imgshow显示预览，在onerror中进行出错处理。
ps：ff、chrome和safari的图片对象还有naturalheight和naturalwidth属性可以获取图片的原始尺寸，即使图片尺寸已经修改过。

这里要注意ie6/7的gif图片载入bug，测试以下代码：

代码
doctype html><body><img id="img" />

</div></body>
<script>
img.onload = function(){ div.innerhtml += this.complete + ", "; };
img.src = "http://tuan.pcpop.com/image/my/loading.gif";
</script>

一般图片执行一次onload后并不会重复执行，但ie6/7的gif每次循环播放都会执行一次onload。
ps：ie8在非标准（怪辟）模式下也有相同的问题。
可以在onload的时候，判断complete是否为false来判断是否重复加载。
ps：除了ie，其他浏览器在onload时complete就已经为true了。
问题是选择另一个图片时这个complete仍然是true，这样就没有意义了。
所以只好在onload里面重置onload为null，并在每次选择文件重设onload了。

然后设置_preload的src预载图片，如果成功预载就会执行_imgshow显示预览。
要注意src的设置要在onload/onerror的设置之后，否则设置之前就加载完成的话就触发不了事件了。

_imgshow需要三个参数，包括要预览图片的src值，图片原始宽度和图片原始高度。
在_imgshow里面首先设置预览图片的尺寸：

代码
var img = this.img, style = img.style,
ratio = math.max( 0, this.ratio ) || math.min( 1,
math.max( 0, this.maxwidth ) / width || 1,
math.max( 0, this.maxheight ) / height || 1
);

style.width = math.round( width * ratio ) + "px";
style.height = math.round( height * ratio ) + "px";

这里的关键是获取ratio比例值，如果自定义的ratio大于0就直接使用自定义的比例，否则就根据参数自动计算。
自动计算首先要确保maxwidth最大宽度和maxheight最大高度大于等于0。
然后分别跟原始宽高做“/”运算得到比例，如果比例为0表示不限制，那么比例就自动改为1。
最后取比较小的比例来计算，程序设定了比例最大值为1，这样就不会自动放大图片了。
当然比例的计算可以根据需要自行修改。
ps：style的优先级比属性(width/height)高，所以要用style设置。

最后设置img的src就可以实现预览了。

【remote模式】

remote模式会先提交file控件到后台，通过返回的数据来显示图片。
它跟其他模式最大的区别就是获取数据的部分。

在_remotedata远程数据获取程序中，会调用_setupload来设置上传文件对象。
如果设置了action，并存在quickupload函数，就会实例化一个上传文件对象保存到_upload中：

代码
var othis = this;
this._upload = new quickupload(this.file, {
onready: function(){
this.action

该文章在 2010/5/1 2:56:21 编辑过

关键字查询

预览

图片

上传

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。