文章 - Vue上传文件9张限制 | 前端网（QDFuns）

html

改造了tinyImgUpload这个插件用的是vue 所以先绑定数据

再在提交的时候把数据读出来

改过的插件文件

/**
 * tinyImgUpload
 * @param ele [string] [生成组件的元素的选择器]
 * @param options [Object] [对组件设置的基本参数]
 * options具体参数如下
 * path 图片上传的地址路径 必需
 * onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需
 * onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需
 * @return [function] [执行图片上传的函数]
 * 调用方法
 * tinyImgUpload('div', options)
 */
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;
        if(ele.files.length>=9){
            alert("最多选择9张图片")
            return false;
        }
        document.querySelector('#img-file-input').click();
        return false;
    },false)

// 预览图片
    //处理input选择的图片
    function handleFileSelect(evt) {
        var files = evt.target.files;
        var filesNum = document.querySelectorAll("#img-container .img-thumb").length + files.length
        console.log(filesNum);
        if(filesNum>=9){
            alert("最多选择9张图片")
            return false;
        }
        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">删除</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);
        return 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;
}

#img-container {margin-top: 1rem;}
    #img-container:after {
        content: '.';
        display: block;
        height: 0;
        visibility: hidden;
        overflow: hidden;
        clear: both;
    }
    .img-item {
        position: relative;
        float: left;
        margin-right: 0.3875rem;
        margin-bottom: 0.3875rem;
        height: 6.1remrem;
        width: 6.1remrem;
        box-sizing: border-box;
    }
    .img-thumb {
        border-radius: 3px;
    }
    .thumb-icon {
        width: 100%;
        height: 100%;
    }
    .img-up-add {
        display: table;
        border: 1px dashed #E0E0E0;cursor: pointer;
    }
    .img-add-icon {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 3rem;
    }
    .img-remove {
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 6.1rem;
        height: 1.3rem;
        background: rgba(0, 200, 254, 0.63);
        color: #fff;
        text-align: center;
        text-decoration: none;
        font-size: 0.7rem;line-height: 1.3rem;letter-spacing: .3rem;
        overflow: hidden;
        background-clip: padding-box;
    }
    .img-remove:hover{text-decoration: none;color: #fff;}
    #img-file-input {
        display: none;
    }
    #msgInfo{left: 50%;margin-left: -122px;}

Vue上传文件9张限制

评论 ( 2 )

最新评论

Vue上传文件9张限制

评论 ( 2 )

最新评论

欢迎您回来

创建账号

找回密码