jquery实现多图选择上传图片效果代码-html代码-BFW代码库

jquery实现多图选择上传图片效果代码

代码语言：html

所属分类：上传

代码描述：jquery实现多图选择上传图片效果代码，可以设置图片上传后端地址url及最大上传图片数量。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        #img-container {
        
        }
        #img-container:after {
            content: '.';
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
            clear: both;
        }
        .img-item {
            position: relative;
            float: left;
            margin-right: 10px;
            margin-bottom:10px;
            height:100px;
            width: 100px;
            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;
            font-size: 70px;
        }
        .img-remove {
            position: absolute;
            right: -0.1875rem;
            top: -0.1875rem;
            display: block;
            width: 20px;
            line-height: 20px;
            height:20px;
            border-radius: 50%;
            background: #f7333d;
            color: #fff;
            text-align: center;
            text-decoration: none;
          
            overflow: hidden;
            background-clip: padding-box;
        }
        #img-file-input {
            display: none;
        }
    </style>



</head>


<div id="upload">

</div>
<button class="submit">上传</button>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
    /**
     * 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;
            document.querySelector('#img-file-input').click();
            return false;
        },false)
    
        // 预览图片
        //处理input选择的图片
        function handleFileSelect(evt) {
            var files = evt.target.files;
            
            if( options.maxnum<files.length){
                alert("最大上传图片数量为"+ options.maxnum);
                
                return;
            }
    
            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.........完整代码请登录后点击上方下载按钮下载查看