图片预览功能

/**
 * 页面html代码中添加代码：
 * 引入js  <script type="text/javascript" src="../../comm/uploadFileNew.js"></script>
 * 引入css <link rel="stylesheet" type="text/css" href="../../comm/uploadFile.css">
 * createForm(点击的按钮对象，字段名或者自定义，index序列，最大上传数量，数组，是否自动生成预览区域，回掉函数)
 * createForm($('#checkButton'),'shenfenzheng','',5,[],null,function(idname,index,filesllist){
if(filesllist.length>0){
$('#loadHis').show();
$('#loadHis').on('click',function(){
for(var i=0;i<filesllist.length;i++){
var fi = filesllist[i];
var url = getFileUrl(fi);
loadHisImg('shenfenzheng','',{url:url,name:fi.name},function(t){
var parent = t.parent();
var url = parent.find('img').eq(0).attr('src');
parent.remove();
console.log('ajsldkf----------'+url);
});
}
})
}
});
 *
 * 注意：不自动生成展示div时，第二个参数必须与html中指定的div的id值一样
 */


var closeImg = {
before : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAOVSURBVHjaYtTUdGdAA4K/fv3U+Pv3rw+QLfT//3+Gf//+vWNiYtjCwsJyAyj2HiT2//8/sGKAAGJB1gkU9Pj581eNnJyctaamMgM/Py8DIyMDw+fPXxlu3rxfdfPmjaPMzIwtTEzMO2B6AAKIBaH5fw4LC1tHeHgQt7u7PYOOjhIDNzcb2IBfv/4x3LjxiGHr1n3WK1duXPPx45sKJiamKSB9AAHECPIC0GZ3ZmbWzQkJkazu7rYMLCyMDD9//gYZCzWcgYGVlRUozsxw9Oh5hv7+Gb8/fXrnC+TvBAggZhERZb7fv3/PdnCwV7C3twT69w+DlpYcw5s3HxkeP34FdP53IPsDg6qqNAMXFxvQIA4GoGXMFy9eVgK6eg1AADH9/ftbW0hIxEpFRQms0MBAlYGDg51BQ0OegZ2dneH58zdAMRUGKSlhBnFxQYY7dx4CvfSHQVBQyAqkFyCAmIWEFDOlpaVtgQHH8O7dB4aXLz8wqKjIMHBysoE1SUqKMCgoSIC90te3lGHNmu0MDx8+Yfjx4xvQmz9eAgQQCzAwhBiBIfX69RugwC+GR4+eAl3yliEx0Y+Bl5eDQU5ODBwG3d0LGdau3QH0AjMwLFiBruQEBjCTEEAAsYBC+du3HwxPnjxnAMY90JCfoLBlePXqLdAAabDNX778AHvl37+/QP9DYubfP0haAAggJlAi+fr1M8Pbt2+Bml4z8PBwMxQURDMoK0uDbf78+QfYJY2N2Qy2thZA//8CGsIMtOg70MI/7wACiAkYkluAfmH48+cPMOHwMbS1FTJoaspB/bwYqHE6w4cP3xn4+DgYWltzgAGqywCMNbABQBdsAQggJmAsX/3+/esxkPNAoX7jxgNQomKYMWMtw65dRxkuXLjGMHHiEobv338x3Lv3DEhDLAO6+hjQq1cBAohRWdkOqOGvOwcHz2Z1dU1WcXEJBgkJYYbbtx+AExIogH/9+s2gra0KDOgPwLTxmOHKlfO/v3z55AtM0jsBAggYjfKg0Lz769eP958/f7FnZ2djAyYUBhERQWBUcgLDhItBWFiY4f37j8AYeshw/frVr1++fCwFal4O8iZAAIENAKdpRoZTwLg99/Llc8VPnz7JffnyFWQwMAa+Mdy/fw+YmW4w3Lp1/eiPH19zgJqXwfIQQACBvQDNiaBsC/K/IDCQNICKfNjYWIVAYQNMH++AIb4FGPrg7IycgwECDADIUZC5UWvTuwAAAABJRU5ErkJggg==",
after : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH1wwbFhkQHxvdFgAAArpJREFUeNplz1to1QUAx/HP/3/O2c7OrudsR8vmamOL2hw5LaQHgxKCLvQSRVgPFhJKo4cyMsmxKNQgfOuhfKxICQTpocvAIFhai/WSTNIcnK3pbu12tnO2cwsfbZ+H3+MXfgGbfURDgn0xHgiIFskUuPgOE/7njsBxahsYqAnDN1p3765N9/QIYzGL4+Myw8PlbC53fp23j5HZFBhgSxPft27f3tfX36+ure2O+sbKiitnzrg2MjK/xjNH+RUCeJbo41xsSyb3PtR/WLQuLhIGVAJKlEsUSyUBrp8966+xsdkl+o7zTwiP8mqSvffu6ZMLs+565YAVWRvL1xSWrpufvmHr/v3y1dVu30pHIuk4pxCEiCQ4nIyEYk15heakmm3bdR06Zrq0LjM3ruPNI+o7O8V7uy1NTkjV10vw4ns0Rw6Q7uCTdLwS1LfMyM+Mytxa0r73aVse2adp52Oau7pd/eGCq4MHNUxPKc4sy1dEylwOt3FPNUH09gTrWhILSr+d9N3pQfGGpHRXjz9/+tHoqRe0t8yqasyK1lKNKlrDdYpVCEqUixRLLBZTep98DkD7zofFO3pVGqlqJlJDDDEK4TkmQlbXc+QWGZ9P2TMwpHXHLpnL541+dVRtMuWp00NmGncpxCkUCLDGWDjJWp6LG0XmJtn6xOu2PrjLzUvn3fr6JdVXP3btmyNqGlN2vHbC/Dxry5SZ+pTfIyh3MN3Jyxt54cKVYYXVKZPn3peIFkTK5G5ckp34W+bLE7IjeWGOOT78gp8DQPwzBtt5dymkkqTmbuIpYnUEAblZsldIrLLB0AGeX2QlAEDD5xy7n7eWia2GlKsREhaIb9CEZS58wKFRplGJAGD9W36JMXwf9cmKdF1RIlGgrmS1zOU/GDjIyZv8iwoENguRQKqblnqiI8yUWUAWJQD4D4Cg/5i7WltRAAAAAElFTkSuQmCC"
}


function viewImg(t){
var x = 10;
var y = 20;
var imgnum = 0;
t.find('img').each(function(){
imgnum++;
})
t.find('img').eq(imgnum-1).mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
var width = this.naturalWidth > document.body.clientWidth ? document.body.clientWidth/3 : this.naturalWidth/2 ;
var height = this.naturalHeight > document.body.clientHeight  ? document.body.clientHeight/3  : this.naturalHeight/2 ;
if(height<width){
width += 'px';
height = '';
}else{
height += 'px';
width = '';
}
var tooltip = "<div id='imgtooltip' z-index='100000'><img src='"+ this.src +"' width='"+width+"' height='"+height+"' alt='"+this.alt+"'/>"+imgTitle+"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
var imgheight = $("#imgtooltip").find('img').eq(0).height();
var imgwidth = $("#imgtooltip").find('img').eq(0).width();
var pagex,pagey;
if(e.pageY<document.body.clientHeight/2){
pagey = e.pageY+y;
}else{
pagey = e.pageY-imgheight ;
}
if(e.pageX<document.body.clientWidth/2){
pagex = e.pageX+x;
}else{
pagex = e.pageX - imgwidth ;
}
$("#imgtooltip")
.css({
"top": pagey + "px",
"left":  pagex  + "px"
}).show("fast");  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
this.title = this.myTitle;
$("#imgtooltip").remove(); //移除 
    }).mousemove(function(e){
    var pagex,pagey;
if(e.pageY<document.body.clientHeight/2){
pagey = e.pageY;
}else{
pagey = e.pageY - (document.body.clientHeight/3) ;
}
if(e.pageX<document.body.clientWidth/2){
pagex = e.pageX+x;
}else{
pagex = e.pageX - document.body.clientWidth/3 ;
}
$("#imgtooltip")
.css({
"top": pagey + "px",
"left":  pagex + "px"
});
});
}


function loadHisImg(idname,index,obj,conCURL,funcall){
var liStr = '<li class="imgtooltip">';
if(conCURL){
liStr += '<img style="position:absolute;padding-left:18px;margin-top:-6px;" src="'+closeImg.before+'" data-alt="'+obj.name+'" class="imgCloseLi"/>';
}
liStr += '<img class="imgLi" src="'+obj.url+'" data-url="'+obj.dataurl+'" alt="'+obj.name+'" width="100%" height="100%" /></li>';
var li = $(liStr);
$('#old'+idname+index+'ul').append(li);
li.find('.imgCloseLi').hover(function() {
this.src = closeImg.after;
}, function() {
this.src = closeImg.before;
}).click(function() {
var parent = $(this).parent();
var url = parent.find('img').eq(0).attr('src');
if(conCURL){
$.post(conCURL,{fileUrl:url},function(result){
parent.remove();
});
}else{
parent.remove();
}
if(funcall&&url){
return funcall($(this),url);
}
});
viewImg(li);
}


function createForm(t,idname,index,maxnum,filesllist,zid,funcall){
var div;
if(zid){
var parent = $(t).parent();
div = $('<div id="'+idname+index+'" style="height:auto;width:100%;"><ul id="old'+idname+index+'ul" class="ulImg"></ul><ul id="'+idname+index+'ul" class="ulImg"></ul></div>');
parent.append(div);
}else{
div = $('#'+idname+index);
}
$(t).on('click',function(){
var that = $(this);
loadUploadInit(that,idname,index,maxnum,filesllist,div,funcall);
});
}


function loadUploadInit(that,idname,index,maxnum,filesllist,div,funcall){
var vale = that.attr('vale');
if(vale == 1 || vale == undefined){
that.attr('vale','2');
var input2 = document.createElement("input");
input2.type = "file";
input2.setAttribute('accept', 'image/jpg,image/jpeg,image/png,image/bmp');
input2.setAttribute("id", idname+"file"+index);
input2.setAttribute("name", idname);
input2.setAttribute("multiple", "multiple");
input2.setAttribute("style","display:none");
input2.onchange = function() {
var fileList = this.files;
if(fileList.length == 0){
$.messager.alert('提示信息', '请选择文件', 'warning'); 
return;
}else if(fileList.length>maxnum){
$.messager.alert('提示信息', '上传的图片数量不得超过'+maxnum+'张！', 'warning'); 
return;
}else{
$('#'+idname+index+'ul').empty();
var upload = true;
var maxsize = 10 * 1024 * 1024;//10MB
var isCmax = false,CmaxStr='';
for(var i=0;i<fileList.length;i++){
var value = fileList[i].name;
var path = value;
var isreturn = false;
if(maxsize<parseInt(fileList[i].size)){
if(CmaxStr !=''){
CmaxStr += ",";
}
CmaxStr += fileList[i].name;
isCmax = true;
}
if(isCmax){
upload = false;
$.messager.alert('提示信息', '单个文件的大小不得超过10MB，请重新选！', 'warning');
break;
}
var url = getFileUrl(fileList[i]);
//filesllist.push(fileList[i]);
var li = $('<li class="imgtooltip"><img class="imgLi" src="'+url+'" alt="'+value+'" width="100%" height="100%" /></li>');
$('#'+idname+index+'ul').append(li);
li.find('.imgCloseLi').hover(function() {
this.src = closeImg.after;
}, function() {
this.src = closeImg.before;
}).click(function() {
$(this).parent().remove();
});
viewImg(li);
}
if(upload && funcall){
return funcall(idname,index,fileList.length>0?fileList:[]);
}
}
};
div.append(input2);
$('#'+idname+'file'+index).css('display', 'none');
input2.click();
}else{
var input2 = document.getElementById(idname+"file"+index);
input2.click();
}
}


function getFileUrl(file) { 
var url; 
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
url = file.value; 
} else if(navigator.userAgent.indexOf("Firefox")>0 || navigator.userAgent.indexOf("Chrome")>0) { // Firefox 
url = window.URL.createObjectURL(file); 
} 
return url; 
}