頁面代碼：
<div class="box-content qtb">
<div class="title">上傳圖片</div>
<div class="imagelist">
<ul id="warp">
<li id="imgdiv_0" class="imgdiv">
<input type="file" id="up_img_WU_FILE_0" name="image_0" multi="true"/>
<img id="imgShow_WU_FILE_0" data-name="0" src="/online/images/photo.png" width="60" height="60"/>
<div class="show"></div>
</li>
<li id="imgdiv_1" class="imgdiv" style="display:none;">
<input type="file" id="up_img_WU_FILE_1" name="image_1" multi="true"/>
<img id="imgShow_WU_FILE_1" data-name="0" src="/online/images/photo.png" width="60" height="60" />
<div class="show"></div>
</li>
<li id="imgdiv_2" class="imgdiv" style="display:none;">
<input type="file" id="up_img_WU_FILE_2" name="image_2" multi="true"/>
<img id="imgShow_WU_FILE_2" data-name="0" src="/online/images/photo.png" width="60" height="60" />
<div class="show"></div>
</li>
<li id="imgdiv_3" class="imgdiv" style="display:none;">
<input type="file" id="up_img_WU_FILE_3" name="image_3" multi="true"/>
<img id="imgShow_WU_FILE_3" data-name="0" src="/online/images/photo.png" width="60" height="60" />
<div class="show"></div>
</li>
<li id="imgdiv_4" class="imgdiv" style="display:none;">
<input type="file" id="up_img_WU_FILE_4" name="image_4" multi="true"/>
<img id="imgShow_WU_FILE_4" data-name="0" src="/online/images/photo.png" width="60" height="60" />
<div class="show"></div>
</li>
<div class="moduan"></div>
</ul>
</div>
<div class="clear"></div>
<div class="tip">
爲了幫助我們更好的解決問題，請上傳照片。
最多5張，每張不超過3M，支持gif，jpeg，jpg， bmp，png格式。
</div>
</div>
javascript代碼：
$(function(){
//上傳圖片
$(".show").click(function(){
$(this).parent("li").find("input").val('');
var li = $(this).parents("li");
if (li.find('img').attr('data-name') == 1){
li.find('img').attr('data-name',0);
li.find('img').attr('src','/online/images/photo.png');
li.find('.show').hide();
li.find('img').css("z-index",0);
}
//重新排序
$(".show").each(function(){
var showli = $(this).parents("li");
if (showli.find('img').attr('data-name') == 0){
$(".moduan").before(showli);
showli.hide();
}
});
$(".show").each(function(){
var showli = $(this).parents("li");
if (showli.find('img').attr('data-name') == 0){
showli.show();
return false;
}
});
});
$("#imageshow").click(function(){$(this).hide();});
//點擊上傳圖片
var uploadPreview = function(setting) {
var _self = this;
_self.IsNull = function(value) {
if (typeof (value) == "function") { return false; }
if (value == undefined || value == null || value == "" || value.length == 0) {
return true;
}
return false;
}
_self.DefautlSetting = {
UpBtn: "",
DivShow: "",
ImgShow: "",
Width: 60,
Height: 60,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
ErrMsg: "選擇文件錯誤,圖片類型必須是(gif,jpeg,jpg,bmp,png)中的一種",
callback: function() { }
};
_self.Setting = {
UpBtn: _self.IsNull(setting.UpBtn) ? _self.DefautlSetting.UpBtn : setting.UpBtn,
DivShow: _self.IsNull(setting.DivShow) ? _self.DefautlSetting.DivShow : setting.DivShow,
ImgShow: _self.IsNull(setting.ImgShow) ? _self.DefautlSetting.ImgShow : setting.ImgShow,
Width: _self.IsNull(setting.Width) ? _self.DefautlSetting.Width : setting.Width,
Height: _self.IsNull(setting.Height) ? _self.DefautlSetting.Height : setting.Height,
ImgType: _self.IsNull(setting.ImgType) ? _self.DefautlSetting.ImgType : setting.ImgType,
MaxSize: 3 * 1024 * 1024,
ErrMsg: _self.IsNull(setting.ErrMsg) ? _self.DefautlSetting.ErrMsg : setting.ErrMsg,
callback: _self.IsNull(setting.callback) ? _self.DefautlSetting.callback : setting.callback
};
_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;
}
_self.Bind = function() {
document.getElementById(_self.Setting.UpBtn).onchange = function() {
if (this.value) {
if (!RegExp("\.(" + _self.Setting.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
comAlert(_self.Setting.ErrMsg);
this.value = "";
return false;
}
if (this.files[0].size > _self.Setting.MaxSize) {
comAlert("圖片過大，每張圖片不超過3M");
this.value = "";
return false;
}
if (navigator.userAgent.indexOf("MSIE") > -1) {
try {
document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
} catch (e) {
var div = document.getElementById(_self.Setting.DivShow);
this.select();
top.parent.document.body.focus();
var src = document.selection.createRange().text;
document.selection.empty();
document.getElementById(_self.Setting.ImgShow).style.display = "none";
div.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
div.style.width = _self.Setting.Width + "px";
div.style.height = _self.Setting.Height + "px";
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
}
} else {
document.getElementById(_self.Setting.ImgShow).src = _self.getObjectURL(this.files[0]);
}
var img_show = document.getElementById(_self.Setting.ImgShow);
img_show.setAttribute("data-name","1");
//圖片點擊展示效果開始
img_show.style.zIndex = 10001;
/*var w_doc = window.screen.width;
var h_doc = window.screen.height;
var thissrc = _self.getObjectURL(this.files[0]);
$(img_show).click(function() {
//等比例
var tuwidth = 0;
var tuheight = 0;
var top = 0;
var left = 0;
var img = new Image();
img.src = thissrc;
img.onload = function(){
if (img.width < w_doc && img.height < h_doc) {
tuwidth = img.width;
tuheight = img.height;
top = (h_doc - tuheight)/2;
left = (w_doc - tuwidth)/2;
$("#imageshow").html("<img src='"+thissrc+"' width='"+tuwidth+"' height='"+tuheight+"'" +
" style='margin-top:"+top+"px; margin-left:"+left+"px;'/>").show();
} else{
if (w_doc/ h_doc <= img.width / img.height){
tuwidth = w_doc;
tuheight = w_doc* (img.height / img.width);
top = (h_doc - tuheight)/2;
$("#imageshow").html("<img src='"+thissrc+"' width='"+tuwidth+"' height='"+tuheight+"' style='margin-top:"+top+"px'/>").show();
}else {
tuwidth = h_doc * (img.width / img.height);
tuheight = h_doc;
left = (w_doc - tuwidth)/2;
$("#imageshow").html("<img src='"+thissrc+"' width='"+tuwidth+"' height='"+tuheight+"' style='margin-left:"+left+"px'/>").show();
}
}
};
});*/
//圖片點擊展示效果結束
var nextdiv = document.getElementById(_self.Setting.DivShow);
$(nextdiv).next().show();
$(nextdiv).find(".show").show();
_self.Setting.callback();
}
}
}
_self.Bind();
}
function file_click(){
var WARP = document.getElementById('warp');
var WARP_LI = WARP.getElementsByTagName('li');
for(var i=0; i<WARP_LI.length;i++){
new uploadPreview({ UpBtn: "up_img_WU_FILE_"+i, ImgShow: "imgShow_WU_FILE_"+i,DivShow: "imgdiv_"+i});
}
}
window.onload = file_click;
});