最近项目需要用到图片上传插件，所以自己动手写了一个
//html代码
选择图片确认
// 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上绑定插件