<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多图上传、预览缩略图</title>
</head>
<script src="tinyImgUpload.js"></script>
<style>
#img-container:after {
content: '.';
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
clear: both;
}
.img-item {
position: relative;
float: left;
margin-right: 0.1875rem;
margin-bottom: 0.1875rem;
height: 2.34375rem;
width: 2.34375rem;
box-sizing: border-box;
}
.img-thumb {
border: 1px solid #000;
}
.thumb-icon {
width: 100%;
height: 100%;
}
.img-up-add {
display: table;
border: 1px dashed #E0E0E0;
}
.img-add-icon {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.img-remove {
position: absolute;
right: -0.1875rem;
top: -0.1875rem;
display: block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: #f7333d;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 0.25rem;
overflow: hidden;
background-clip: padding-box;
}
#img-file-input {
display: none;
}
.spacetest{
white-space: pre;/*空白被保留*/
}
</style>
<body>
<button class="submit">submit</button>
<div id="upload"></div>
<div class="spacetest">
<span>11111</span>
<span>22222222</span>
</div>
<!-- addEventListener()和attachEvent() -->
<div class="test1">
<button class="btn1"></button>
</div>
<div class="test2">
<button class="btn2"></button>
</div>
<div class="test3">
<button class="btn3"></button>
</div>
<div class="test4">
<button class="btn4"></button>
</div>
<script>
// 设置参数
var options = {
path: '/', // 上传图片时指定的地址路径,类似form变淡的action属性
onSuccess: function (res) { // 上传成功后执行的方法,res是接收的ajax响应内容
console.log(res);
},
onFailure: function (res) { // 上传失败后执行的方法,res是接收的ajax响应内容
console.log(res);
}
}
// 执行生成图片上传插件的方法, 第一个参数是上面提到的准备生成组件的div选择器,第二个参数是设置的组件信息,执行方法后返回一个函数指针,指向执行上传功能的函数,通过把执行上传功能的函数暴露出来,用户就可以自己控制何时上传图片了。
var upload = tinyImgUpload('#upload', options);
</script>
<script>
document.getElementsByClassName('submit')[0].onclick = function (e) {
upload();
}
</script>
</body>
<script>
// 预览图片
//处理input选择的图片
function handleFileSelect(evt) {
var files = evt.target.files;
for(var i=0, f; f=files[i];i++){
// 过滤掉非图片类型文件
// if(!f.type.match('image.*')){
// continue;
// }
if(!f.type.match('image/*')){
alert('上传的图片必须是png,gif,jpg格式的!');
ev.target.value = ""; //显示文件的值赋值为空
continue;
}
// 过滤掉重复上传图片
var tip = false;
for(var j=0; j<(ele.files).length; j++){
if((ele.files)[j].name == f.name){
tip = true;
break;
}
}
if(!tip){
// 图片文件绑定到容器元素上
ele.files.push(f);
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var oDiv = document.createElement('div');
oDiv.className = 'img-thumb img-item';
// 向图片容器里添加元素
oDiv.innerHTML = '<img class="thumb-icon" src="'+e.target.result+'" />'+
'<a href="javscript:;" class="img-remove">x</a>'
ele.insertBefore(oDiv, addBtn);
};
})(f);
reader.readAsDataURL(f);
}
}
}
// input#img-file-input是一个隐藏的上传图片的input控件,当选择图片的时候会触发change事件
document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);
// 上传图片
function uploadImg() {
var xhr = new XMLHttpRequest();
var formData = new FormData();
for(var i=0, f; f=ele.files[i]; i++){
formData.append('files', f);
}
xhr.onreadystatechange = function (e) {
if(xhr.readyState == 4){
if(xhr.status == 200){
options.onSuccess(xhr.responseText);
}else {
options.onFailure(xhr.responseText);
}
}
}
xhr.open('POST', options.path, true);
xhr.send(formData);
}
var test1 = document.querySelector('.test1');
console.log(test1);
test1.onclick = function(){
alert('1');
}
var test2 = document.querySelector('.test2');
console.log(test2);
var test3 = $('.test3');
console.log(test3);
var test4 = $('.test4');
console.log(test4);
</script>
</html>
tinyImgUpload.js代码:
function tinyImgUpload(ele, options) {
var eleList = document.querySelectorAll(ele);
if(eleList.length == 0){
console.log();
return;
}else if(eleList.length>1){
console.log();
return;
}else {
eleList[0].innerHTML ='<div id="img-container" >'+
'<div class="img-up-add img-item"> <span class="img-add-icon">+</span> </div>'+
'<input type="file" name="files" id="img-file-input" multiple>'+
'</div>';
var ele = eleList[0].querySelector('#img-container');
ele.files = [];
}
var addBtn = document.querySelector('.img-up-add');
addBtn.addEventListener('click',function () {
document.querySelector('#img-file-input').value = null;
document.querySelector('#img-file-input').click();
return false;
},false)
function handleFileSelect(evt) {
var files = evt.target.files;
for(var i=0, f; f=files[i];i++){
if(!f.type.match('image.*')){
continue;
}
var tip = false;
for(var j=0; j<(ele.files).length; j++){
if((ele.files)[j].name == f.name){
tip = true;
break;
}
}
if(!tip){
ele.files.push(f);
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var oDiv = document.createElement('div');
oDiv.className = 'img-thumb img-item';
oDiv.innerHTML = '<img class="thumb-icon" src="'+e.target.result+'" />'+
'<a href="javscript:;" class="img-remove">x</a>'
ele.insertBefore(oDiv, addBtn);
};
})(f);
reader.readAsDataURL(f);
}
}
}
document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);
function removeImg(evt) {
if(evt.target.className.match(/img-remove/)){
console.log('3',ele.files);
function getIndex(ele){
if(ele && ele.nodeType && ele.nodeType == 1) {
var oParent = ele.parentNode;
var oChilds = oParent.children;
for(var i = 0; i < oChilds.length; i++){
if(oChilds[i] == ele)
return i;
}
}else {
return -1;
}
}
var index = getIndex(evt.target.parentNode);
ele.removeChild(evt.target.parentNode);
if(index < 0){
return;
}else {
ele.files.splice(index, 1);
}
console.log('4',ele.files);
}
}
ele.addEventListener('click', removeImg, false);
function uploadImg() {
console.log(ele.files);
var xhr = new XMLHttpRequest();
var formData = new FormData();
for(var i=0, f; f=ele.files[i]; i++){
formData.append('files', f);
}
console.log('1',ele.files);
console.log('2',formData);
xhr.onreadystatechange = function (e) {
if(xhr.readyState == 4){
if(xhr.status == 200){
options.onSuccess(xhr.responseText);
}else {
options.onFailure(xhr.responseText);
}
}
}
xhr.open('POST', options.path, true);
xhr.send(formData);
}
return uploadImg;
}