原生js实现多图片上传、预览

<!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;
}

原生js实现多图片上传、预览

猜你喜欢