最近项目的会员中心，要做一个上传本地img并预览的效果。效果大概是这个样子。自己以前没做过；摸着石头过河总算完成了感觉有必要整理一下，写篇博客耍耍。
整体效果大概是这个样子的：
1.点击框框任何地方；弹出选择文件窗口；
2.选择后，再框框区域预览；
3.再次点击框框，更换图片。
下面说说整个实现的过程吧。
html代码的结构大概是这样的。
<div class="imgitem secondImg"> <div class="u-add-img-icon u-fileUploadContainer"> </div> <input id="fileImage2" type="file" multiple="" class="u-fileInput"> <span class="imgcontainer"><img src="" class="idImg"></span> <span class="backImg">***反面</span> </div>
步骤：
1.首选是要模拟type=file；点击之后选择文件的效果。
最外层的imgitem设置固定宽高，postion：realative；
然后就是加一张上传图片的图标；告诉用户可以上传预览图片
最后，input type="file"位置绝对定位；设置透明度为0；位置刚好铺满外层的框框。这样点击框框里面任何位置就可以弹窗选择文件的框框了。
Css代码如下：
.imgitem {
width: 240px;
height: 160px;
display: inline-block;
border: 1px #d5d4d4 dotted;
text-align: center;
line-height: 160px;
position: relative;//相对定位
}
.u-fileInput{
width: 240px;
height: 160px;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
opacity: 0;//透明度为0
filter: alpha(opacity=0);;//透明度为0，兼容IE8
cursor: pointer;
}
//add-img图标
.u-add-img-icon {
width: 74px;
height: 61px;
background: url(../images/member/add-img-icon.png) no-repeat;
display: inline-block;
vertical-align: middle;2.选择后预览；这个地方的实现比较巧妙；因为我们知道type=file；选择文件后，选择会返回一个file对象；而createObjectURL(file)可以接受一个文件对象；并返回文件的url；然后指定img的src围着url；就可以实现预览图片了。
这个地方稍微复杂；代码如下：
首选封装了一个上传预览的小插件：叫uploadPreview
有关createObjectURL的东东，不了解的百度，看一下。不是本文的重点；略过。
/*
*名称:图片上传本地预览
*作者:贾襄俊
*时间:2015年9月11日
*介绍:基于JQUERY扩展,图片上传预览插件
*参数说明: imgObj:图片jquery对象;type:支持文件类型;callback:选择文件显示图片后回调方法;
*使用方法:
<div>
<img id="temp"/></div>
<input type="file" id="up" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ imgObj: $("#temp"), type: ["gif", "jpeg", "jpg", "bmp", "png"], callback: function () { }});
*/
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
imgObj: null,
type: ["gif", "jpeg", "jpg", "bmp", "png"],
callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file)
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file)
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file)
}
return url
};
_this.change(function () {
if (this.value) {
if(!opts.imgObj){
return;
}
if (!RegExp("\.(" + opts.type.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("文件格式错误,必须是" + opts.type.join("，") + "中的一种");
this.value = "";
return false
}
if (document.selection) {
try {
opts.imgObj.attr(‘src‘, _self.getObjectURL(this.files[0]))
} catch (e) {
var src = "";
var obj = opts.imgObj;
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus()
} else {
_self.blur()
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
‘filter‘: ‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)‘
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
}
} else {
opts.imgObj.attr(‘src‘, _self.getObjectURL(this.files[0]))
}
opts.callback()
}
})
}
});然后就是input type =file的元素调用：
//图片添加预览效果
$(".u-fileInput").each(function(){
var $this = $(this);
$this.uploadPreview({imgObj:$this.next().find("img"), callback:uploadHandler});
//获取url设置img src成功后，回调，隐藏add-icon；显示图片
function uploadHandler() {
$this.next().show();
$this.prev().hide();
}
});3.最后点击框框更换图片就比较简单了，这里就不多赘言了。
每天进步一点点。
本文出自 “shuizhongyue” 博客，请务必保留此出处http://shuizhongyue.blog.51cto.com/7439523/1694288
原文地址：http://shuizhongyue.blog.51cto.com/7439523/1694288
