頁面程式碼：

上傳圖片

• 
• 
• 
• 
• 

為了幫助我們更好的解決問題，請上傳照片。 最多5張，每張不超過3M，支援gif，jpeg，jpg， bmp，png格式。 ********************************************************************************************************************* 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; 	
 

});