多图片上传插件

最近项目需要用到图片上传插件，所以自己动手写了一个

//html代码

<div class="file-box">
	<div class="file-btn">
		选择图片
		<input type="file" name="file" id="file" value="" multiple />
	</div>
</div>

<div class="submit">确认</div>

//  multiple属性是可选的，表示是否可以多个文件一起上传

//  accept="image/*" 表示检索的文件只能是图片,在input中没有加入这个属性原因是，文件很大很多时筛选出是图片文件这个过程等待的时间太长，所以没有加上

而是，在上传的过程做文件类型的判断，如果是图片就上传，不是则返回不上传

//css样式

.file-box {
	display: block;
	width: auto;
	height: auto;
}
.file-btn {
	position: relative;
	display: inline-block;
	background: #1E88C7;
	border: 1px solid #1E88C7;
	border-radius: 4px;
	padding: 4px 7px;
	overflow: hidden;
	color: #fff;
	line-height: 20px;
	cursor: pointer;
}
.file-btn input {
	position: absolute;
	font-size: 16px;
	right: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
.submit {
	width: 80px;
	height: 30px;
	line-height: 30px;
	border-radius: 6px;
	background-color: #f90;
	color: #fff;
	font-size: 16px;
	text-align: center;
}
.zk-addImg {
	height: 40px;
	width: 350px;
	margin: 10px;
	padding: 10px;
	background-color: #eee;
	font-size: 14px;
}
.upload-progress {
	background-color: #E5E5E5;
	margin-top: 10px;
	width: 100%;
}
.upload-progress-bar {
	background-color: #0099FF;
	height: 3px;
	width: 1px;
}

　//效果　

　　

//重点来了，js实现图片上传

(function (Global, $) {
	var uploadCallback = function (defaults) {
		var file = document.getElementById("file");
		var arrdata = [];
		//绑定点击确认按钮事件
		$('.submit').click(function () {
			defaults.callback(arrdata);
		});

		file.onchange = function () {
			//获取的图片文件
			var fileList = file.files;
			fileList = Array.prototype.slice.call(fileList);

			var arrFile = [];
			//遍历获取到得图片文件
			fileList.forEach(function (ele, index) {
				var imgType = ele.type.split("/")[0];
				if (imgType != "image") {
					alert("所选 '" + ele.name + "' 文件类型不正确");
				} else {
					var size = ele.size; //注意，这里读到的是字节数
					var isAllow = false;
					if (!size) isAllow = false;
					var maxSize = defaults.maxFileSize;
					isAllow = size <= maxSize;
					if (isAllow) {
						arrFile.push(ele);
					} else {
						alert("所选 '" + ele.name + "' 文件大小超过限制");
					}
				}
			});
			file.value = null;
			arrFile.forEach(function (file, index) {
				var sizeKb = Math.floor(((file.size / 1024) * 100)) / 100; //转换成kb
				//upload
				var oMyForm = new FormData();
				oMyForm.append('Filedata', file);
				var oReq = new XMLHttpRequest();
				oReq.responseType = "json";
				oReq.onload = function (e) {
					//服务器返回的地址
					//console.log(this.response.data[0]);
					var stat = this.response.stat;
					if (stat == 1) {
						var imgUrl = this.response.data[0]
						arrdata[index] = imgUrl;
						defaults.loadCall(e);
						arrFile = null;
					} else {
						alert(this.response.msg);
					}
				};
				//存放图片的父级元素
				var imgContainer = document.getElementsByClassName("file-box")[0];
				//重现
				var span = document.createElement("span");
				span.setAttribute('class', 'file-name');
				span.innerHTML = file.name;

				var spanEnd = document.createElement('span');

				var progress = document.createElement('div');
				progress.setAttribute('class', 'upload-progress');
				var progress_bar = document.createElement('div');
				progress_bar.setAttribute('class', 'upload-progress-bar');
				progress.appendChild(progress_bar);

				var imgAdd = document.createElement("div");
				imgAdd.setAttribute("class", "zk-addImg");
				imgAdd.appendChild(span);
				imgAdd.appendChild(spanEnd);
				imgAdd.appendChild(progress);
				imgContainer.appendChild(imgAdd);

				oReq.upload.onprogress = function (e) {
					//console.log('进度信息=>', e);
					var difpropress = (e.loaded / e.total) * 100;
					progress_bar.style.width = difpropress + "%";
					spanEnd.innerHTML = '（' + sizeKb + 'kb）' + ' - Complete';
				}
				oReq.open("POST", "upload.php?type=img");
				oReq.send(oMyForm);
			});
		};
	};
	//init
	var zkImgMonitor = {};
	Global.zkImgMonitor = {
		init: function (options) {
			var defaults = {
				//最大图片尺寸
				maxFileSize: 2000,
				loadCall: function () {},
				callback: function (data) {}
			};
			$.extend(defaults, options);
			uploadCallback(defaults);
		}
	};

})(window, window.jQuery);　　

//在html上绑定插件

<script>
	zkImgMonitor.init({
		//最大图片尺寸
		maxFileSize: 200000,
		//超出图片大小的提示文字
		tipsText: "",
		loadCall: function(data) {
			console.log('上传完成的单张图数据 => ', data);
		},
		callback: function(data) {
			console.log('点击确认按钮后返回的数据 => ', data);
		}
	});
</script>