最近项目需要用到图片上传插件,所以自己动手写了一个
//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>