蚂蚁分类信息系统PC端扫码传图插件

PC端微信扫码传图,方便手机中的图片直接上传到电脑端。
实现效果图

相关代码 核心JS实现思路

  var upV =1;
var upW=586; 
var upH=781; 
var upZip=0.8; 
var upi=0;
function upInit(V,X,F) {
	try {
		document.write("<canvas style=\"display:none\" id=\"canvas\"></canvas><span id=\"image-up\" style=\"position:relative;display:inline-block;width:72px;height:24px;line-height:24px;text-align:center;color:#333;background-color: #eee;border: 1px solid #999;border-radius:4px;margin-right:15px;cursor:pointer;\" onMouseOut=\"this.style.textDecoration='none';\" onMouseOver=\"this.style.textDecoration='underline';\"><input type=\"file\" name=\"file\" id=\"file\" style=\"position:absolute;width:72px;height:24px;opacity:0;filter: alpha(opacity=0);z-index:2;top:0px;left:0px;text-indent:-999px;cursor:pointer;overflow:hidden;\" ");

		if (is_canvas() && navigator.userAgent.toLowerCase().indexOf("chrome")!=-1) {
			document.write(" accept=\"image/gif,image/jpeg,image/jpg,image/png,image/bmp\" multiple=\"multiple\" οnchange=\"up(this.files);\"");
		} else {
			document.write(" accept=\"image/gif,image/jpeg,image/jpg,image/png,image/bmp\" οnchange=\"up1(this.files);\"");
		}
		document.write("/>上传图片</span>");
	}catch (e) {}
	document.write("<a style=\"position: relative;display:inline-block;width:72px;height:24px;line-height:24px;text-align:center;color:#333;background-color: #eee;border: 1px solid #999;border-radius:4px;\" href=\"javascript:openWindow('/wxup.php?id='+$find('tid').value,'微信上传图片',300,280)\">微信传图</a>");
	if(V>0){document.write(" <font color=#888888> (可上传"+V+"张,图片小于"+Math.round(X/1024*100)/100+"M)</font><input type=\"hidden\" name=\"files\" id=\"files\" size=65 value=\"\"><br /><ul id=\"upfile_ul\" style=\"float:left;width:440px;height:auto;margin:5px 0;overflow:hidden;clear:both;display:none;\"></ul>");}

	upV = V;
	if (F.length > 0) {
		$find("files").value = F;
		if (window.addEventListener) {
			window.addEventListener("load", uplist, false);
		} else if (window.attachEvent) {
			window.attachEvent("onload", uplist);
		} else {
			window.onload = uplist;
		}
	}
	
}
function vv_t() {
$find("vv").innerHTML=upV;
	setTimeout(vv_t,700);
}

function uplist() {
  if($find("files").value.length>4){  
	  var ps=$find("files").value.split("|");
	  $find("upfile_ul").style.display = "block";
	  for (var i = 0; i <ps.length; i++) {if(ps[i].length>4){addli(i,ps[i]);}}
	  upi=i;
    }
}
function addli(id, v) {
        var upId = "upload_" + id;
		var u= v.length<5?"/template/default/upload/image/uping.gif":""+v,li_html;
		li_html = string.Format('<input type="hidden" id="img{0}" name="img[{0}]" value="{1}"><img id="pic_{0}" src="{2}" width="100" height="75" /><br /><a href="javascript:px({0},0);" class="c888">&laquo;</a><a href="javascript:delimg({0});" style="margin:0 20px;">删除</a><a href="javascript:px({0},1);" class="c888">&raquo;</a>',id,v,u);
		if(!$find(upId)){
		var spanOBJ = document.createElement("li");
		spanOBJ.id = upId;
		spanOBJ.style.styleFloat = "left";
		spanOBJ.style.cssFloat = "left";
        spanOBJ.style.marginRight = "10px";
		spanOBJ.style.textAlign="center";
		spanOBJ.innerHTML =li_html;
        $find("upfile_ul").appendChild(spanOBJ);
		}else{$find(upId).innerHTML = li_html;}
}

function px(id,lx) {
var hid;
var lis = $find("upfile_ul").childNodes;
if(lis.length>1){
	if(lx>0){
	   for (var i=0;i<lis.length;i++ ){   
		  hid=parseInt(lis[i].id.replace(/upload_/i, ''));
	      if (hid>id){break;}
		}
		if(hid==id){hid=parseInt(lis[0].id.replace(/upload_/i, ''))}
	}else{ 
	   for (var i=lis.length-1;i >= 0; i--){   
		  hid=parseInt(lis[i].id.replace(/upload_/i, ''));
	      if (hid<id){break;}
		}
		if(hid==id){hid=parseInt(lis[lis.length-1].id.replace(/upload_/i, ''))}
	}
	$find("files").value=$find("files").value.replace($find("img"+id+"").value+"|","@hid").replace($find("img"+hid+"").value+"|",$find("img"+id+"").value+"|").replace("@hid",$find("img"+hid+"").value+"|");
	$find("upfile_ul").innerHTML="";uplist();
	}
}

function delimg(id) {
    var uls=$find("upfile_ul").childNodes.length-1;
	if ($find("img"+id+"").value.length>0){
	    $find("files").value=$find("files").value.replace($find("img"+id+"").value+"|","");
		Ajax("/mini.php?abc=del&tp="+$find("img"+id+"").value,function(o){});
	   }
	$find("upfile_ul").removeChild($find('upload_'+id));
	if (uls==0){$find("upfile_ul").style.display = "none";}
}


var myfiles=null;//全局缓存
function up(files) {
	var uls=$find("upfile_ul").childNodes.length;
	var selectLength = files.length;
	var tip = "最多只能选择"+upV+"张图片";
if (uls+selectLength>upV) {
	 	if(upV-uls>0 && uls>0){
			 tip = tip + ",还可以选择"+(upV-uls)+"张图片.";
		}
		alert(tip);
		return;
	}
myfiles=files;
for (var i=0;i<myfiles.length;i++)
{
	if (myfiles[i].type.match(/^image\/(jpeg|jpg|jfif|pjp|pjpeg|heif|heic|bmp|gif|png)$/i) && myfiles[i].name.match(/\.(jpeg|jpg|jfif|pjp|pjpeg|heif|heic|bmp|gif|png)$/i)) {
		if (uls>=upV) {
			alert("最多只能上传"+upV+"张图片");
			break;
		}
		setTimeout("up2(" + i + ")",i*666);
		uls++;
	} else {
		alert("仅支持jpg/gif/bmp/png图片");
	}
  }
}

//单文件上传
function up1(files) {
if ($find("upfile_ul").childNodes.length>=upV) {
		alert("还可上传0张图片");
		return;
	}
	$find("upfile_ul").style.display = "block";

	var m = $find("upfile_ul").childNodes.length;
	if(m > 0){upi = parseInt($find("upfile_ul").childNodes[m-1].id.replace(/upload_/i, '')) + 1;}


	var gxi = upi;
		upi++;
		addli(gxi, "");	
				var formData = new FormData();
				formData.append("file", files[0]);
                
				var _xml = XmlHttp();
				_xml.open("POST", "/mini.php?w="+upW+"&h="+upH+"&Atime=" + new Date().getTime(), true);
				_xml.send(formData);
				_xml.onreadystatechange = function() {
					if(_xml.readyState == 4) {
						if(_xml.status >= 200 && _xml.status < 300 || _xml.status == 304) {
							var str=unescape(_xml.responseText);
							if(str.indexOf(".")!=-1){
		$find("files").value += str + "|";
		setTimeout(function(){addli(gxi, str);},300);
							}else{
						delimg(gxi);
						}
					}
				}
}

var upts="";
function up2(i) {
		$find("upfile_ul").style.display = "block";
		//upi = $find("upfile_ul").childNodes.length;
		var m = $find("upfile_ul").childNodes.length;
		if(m > 0){upi = parseInt($find("upfile_ul").childNodes[m-1].id.replace(/upload_/i, '')) + 1;}

		var gxi = upi;
		upi++;
		addli(gxi, "");		
			var img = new Image();
			img.id="myimg_"+i;
            img.crossOrigin = "Anonymous";
			img.onload = function() {
				var width = img.width,
					height = img.height,
					scale = width / height;
				if (width > upW || height > upH) {
					if (width > height) {
						width = parseInt(upW);
						height = parseInt(width / scale)
					} else {
						scale = height / width;
						height = parseInt(upH);
						width = parseInt(height / scale);
					}
				}
				var canvas = $find("canvas");
				canvas.width = width;
				canvas.height = height;
				var ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, width, height);
				ctx.drawImage(img, 0, 0, width, height);
				var base64 = canvas.toDataURL("image/jpeg", upZip);
				base64 = base64.replace(/^data:image\/(jpeg|jpg|jfif|pjp|pjpeg|heif|heic|bmp|gif|png);base64,/i, "");
				Ajax("/mini.php?abc=h5&w="+upW+"&h="+upH, function(o) {
					if (o.indexOf(".jpg") > -1 || o.indexOf(".jpeg") > -1 || o.indexOf(".png") > -1 || o.indexOf(".gif") > -1) {
						$find("files").value += o + "|";
						console.log($find("files").value);
						setTimeout(function(){addli(gxi, o);},300);
					} else {
						console.log("cuowu");
						delimg(gxi);
						if(o!=upts){alert(o);}
						upts=o;
					}
				}, ''+i);
			}
			img.src = webkitURL.createObjectURL(myfiles[i]);
}

function file_complete(tp){ 	
	$find("upfile_ul").style.display = "block";
	var m = $find("upfile_ul").childNodes.length;
	if(m >= upV) {
		alert('最多可以上传'+upV+'张图片');
		return;}
	var newN = 1;
	if(m > 0){newN = parseInt($find("upfile_ul").childNodes[m-1].id.replace(/upload_/i, '')) + 1;}
    //addli(newN+1,"");
   if(tp.length>4){	
	  $find("files").value+=tp+"|";
      addli(newN,tp)
	}
}

function is_canvas(){
    var elem = document.createElement('canvas');
    return !!(elem.getContext && elem.getContext('2d'));
}
















string = {};
string.Format = function () {
	var param = [];
	for (var i = 0, length = arguments.length; i < length; i++) {
		param.push(arguments[i]);
	}
	var format = param[0];
	param.shift();
	return format.replace(/\{(\d+)}/g, function (m, i) {
		return param[i];
	});
}


var is_ie = (navigator.userAgent.toLowerCase().indexOf("msie") != -1);
function $find(d) { return document.getElementById(d); }
function $n(d) { return document.getElementsByName(d); }
function isk(ids) { return typeof ids == 'undefined' ? true : false; }
function ietruebody() { return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body; }





function openWindow(_sUrl, sTitle, width, height, lx, bj) {
	if (!_sUrl) {
		return;
	}
	if (isk(sTitle)) {
		sTitle = "";
	}
	if (isk(width)) {
		width = 560;
	}
	if (isk(height)) {
		height = 420;
	}
	if (isk(lx)) {
		lx = 0;
	}
	if (isk(bj)) {
		bj = 0;
	}

	var oEdit = new dialog(sTitle, width, height, bj);
	oEdit.init();
	_sUrl += (_sUrl.indexOf("?") == -1 ? "?" : "&") + "Atime=" + new Date().getTime();
	oEdit.open(_sUrl, lx);
}


function dialog(sTitle, width, height, bj) {
	var sBox = '<div onMouseDown="new dialog().moveStart(event);" id="dialogBox_title" ><span id="dialogBox_title_l"></span><img src="/template/default/upload/image/jst_close.gif" title="关闭窗口" οnclick="new dialog().reset();">' + sTitle + '<span id="dialogBox_title_r"></span></div><div id="dialogBody" style="height:' + height + 'px;">loading...</div>';
	this.reset = function () {
		$find("dialogBox").style.display = "none";
		if ($find("dialogBj")) {
			$find("dialogBj").style.display = "none";
		}
	};
	this.init = function () {
		if (bj == 2) {
			sBox = sBox.replace("<img src=\"/template/default/upload/image/jst_close.gif\" title=\"关闭窗口\" οnclick=\"new dialog().reset();\">", "");
		}
		if ($find("dialogBox")) {
			$find("dialogBox").style.display = "block";
			$find("dialogBox").style.width = width + "px";
			$find("dialogBox").innerHTML = sBox;
		} else {
			var oDiv = document.createElement("div");
			oDiv.id = "dialogBox";
			oDiv.style.width = width + "px";
			oDiv.innerHTML = sBox;
			document.body.insertBefore(oDiv, document.body.childNodes[0]);
		}
		this.middle("dialogBox");
		if (bj > 0) {
			if ($find("dialogBj")) {
				$find("dialogBj").style.display = "block";
			} else {
				var bjDiv = document.createElement("div");
				bjDiv.id = "dialogBj";
				bjDiv.style.width = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth) + "px";
				bjDiv.style.height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) + "px";
				document.body.insertBefore(bjDiv, document.body.childNodes[0]);
			}
		}
	};
	this.open = function (_sUrl, lx) {
		switch (lx) {
			case 4:
				$find("dialogBody").innerHTML = _sUrl;
				break;
			case 3:
				$find("dialogBody").innerHTML = "<OBJECT classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA class=OBJECT id=RAOCX width=100% height=100%><PARAM NAME=SRC VALUE=\"" + _sUrl + "\"><PARAM NAME=CONSOLE VALUE=\"" + _sUrl + "\"><PARAM NAME=CONTROLS VALUE=imagewindow><PARAM NAME=AUTOSTART VALUE=1></OBJECT>";
				break;
			case 2:
			case 1:
				$find("dialogBody").innerHTML = "<embed src=\"" + _sUrl + "\" width=\"100%\" height=\"100%\" border=\"0\"></embed>";
				break;
			case 9:
			case 0:
				var isscrolling = lx == 9 ? "auto" : "no";
				$find("dialogBody").innerHTML = "<div id=\"Jst_Iframe_Ts\"><img src=\"/template/default/upload/image/ing2.gif\" /></div><iframe width=\"100%\" id=\"Jst_Iframe\" height=\"100%\" frameborder=\"0\" scrolling=\"" + isscrolling + "\"></iframe>";
				var Jst_Iframe = $find("Jst_Iframe");
				Jst_Iframe.src = _sUrl;
				if (Jst_Iframe.attachEvent) {
					Jst_Iframe.attachEvent("onload", function () {
						$find("Jst_Iframe_Ts").style.display = "none";
					})
				} else {
					Jst_Iframe.onload = function () {
						$find("Jst_Iframe_Ts").style.display = "none";
					}
				}
				break;
		}
	};
	this.moveStart = function (event) {
		var oObj = $find("dialogBox");
		if (document.attachEvent) {
			oObj.attachEvent("onmousemove", mousemove);
			oObj.attachEvent("onmouseup", mouseup);
			oObj.attachEvent("onlosecapture", mouseup);
			oObj.setCapture();
		} else {
			document.addEventListener("mousemove", mousemove, true);
			document.addEventListener("mouseup", mouseup, true);
		}
		var oEvent = event || window.event;
		var deltaX = oEvent.clientX - oObj.offsetLeft;
		var deltaY = oEvent.clientY - oObj.offsetTop;

		function mousemove(event) {
			var oEvent = event || window.event;
			oObj.style.left = parseInt(oEvent.clientX - deltaX) + "px";
			oObj.style.top = parseInt(oEvent.clientY - deltaY) + "px";
		}
		function mouseup() {
			if (document.attachEvent) {
				oObj.detachEvent("onmousemove", mousemove);
				oObj.detachEvent("onmouseup", mouseup);
				oObj.detachEvent("onlosecapture", mouseup);
				oObj.releaseCapture();
			} else {
				document.removeEventListener("mousemove", mousemove, true);
				document.removeEventListener("mouseup", mouseup, true);
			}
		}
	};
	this.middle = function (_sId) {
		$find(_sId).style.left = parseInt((ietruebody().clientWidth / 2) - ($find(_sId).offsetWidth / 2)) + "px";
		var sClientHeight = ietruebody().clientHeight;
		var sScrollTop = document.body.scrollTop + document.documentElement.scrollTop;
		var sTop = (sClientHeight / 2 + sScrollTop) - ($find(_sId).offsetHeight / 2);
		$find(_sId).style.top = parseInt(sTop > 0 ? sTop : (sClientHeight / 2 + sScrollTop) - ($(_sId).offsetHeight / 2)) + "px"
	}
}


function XmlHttp() {
	return window.ActiveXObject ? new window.ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
}
function Ajax(u, cmd, data, t, cmd2) {
	u += (u.indexOf("?") > -1 ? "&" : "?") + "Atime=" + new Date().getTime();
	var _xml = XmlHttp();
	var _t = isk(t) ? 600000 : t;
	var _isAsync = _t == 0 ? false : true;


	if (isk(data) || data.toLowerCase() == "get") {
		_xml.open("GET", u, _isAsync);
		_xml.send(null);
	} else {
		_xml.open("POST", u, _isAsync);
		var formData = new FormData();
		formData.append('file', $('#file')[0].files[data]);
		formData.append('id',$find('tid').value);
		formData.append('m',$find('upload_m').value);
		_xml.send(formData);
		//_xml.send(data);
	}
	if (_isAsync) {
		var cleaeTO = setTimeout(function () {
			_xml.abort();
			if (!isk(cmd2)) {
				cmd2();
			}
		}, _t < 250 ? 250 : _t);
		_xml.onreadystatechange = function () {
			if (_xml.readyState == 4) {
				if (_xml.status == 200) {
					clearTimeout(cleaeTO);
					cmd(_xml.responseText);
				}
			}
		}
	} else {
		if (_xml.readyState == 4) {
			if (_xml.status == 200) {
				cmd(_xml.responseText);
				_xml = null;
			}
		}
	}
}