js文件上传 图片简单上传预览 封装

效果

代码实现

调用

let uploading =  document.querySelector(".uploading")
let file = upLoading(uploading)
file.imgFile() //获取文件对象

或
file = upLoading(
   this.el.uploading,
   imgArr,
   6,
   300,
   false,
   function() { // 图片大小超出回调 
       toastr.warning("图片太大！")
   },
   function() { // 图片类型错误回调 
       toastr.warning("文件类型错误！")
   },
   function() { // 图片数量超出回调 
       toastr.warning("图片数量超出！")
   }
)

html结构

<div class="uploading">                 
    <!-- <div class="imgList upkuai">
        <img src="../../img/xfm/add.jpg" alt="" >
        <div class="imgclose"></div>
    </div>
  
    <div class="fileAdd upkuai">
        <input type="file" name="" class="fileinput">
        <img src="../../img/xfm/add.jpg" alt="" >
    </div> -->

</div>

js

window.upLoading = upLoading

/**
 * 文件上传组件
 * @param {*} con 容器
 * @param {Array} imgArr 初始图片
 * @param {number} imgLimit 图片限制张数 默认6
 * @param {number} imgSize 图片大小 kb 默认1mb
 * @param {} defaultUrl 默认图片处理 404
 * @param {function} imgSizeFun 图片大小超出回调 
 * @param {function} imgTypeFun 图片类型错误回调 
 * @param {function} imgNumFun 图片数量超出回调 
 * 记录修改了图片
 * return imgFile 返回所有文件对象  区分是否注入的图片 old属性
 */
function upLoading(con,imgArr=[],imgLimit=6,imgSize=1024,defaultUrl,imgSizeFun,imgTypeFun,imgNumFun){

    defaultUrl = defaultUrl || "../../img/404_not_found.png"

    let listObj = {}
    let imgIndex = 0;
    let upLoadings = true; //图片上传完成状态
    /**
     * 创建dom节点
     * @param {*} nodeName 节点名称
     * @param {*} classList  节点类
     * return 返回创建节点
     */
    function createDom(nodeName,classList){
        var node = document.createElement(nodeName)
        node.classList = classList || ""
        return node
    }

    /**
     * 创建图片模块
     * @param {*} src 图片路径
     * @param {*} old 是否初始图片
     * @param {*} closeFun close 点击回调
     * return 返回模块dom
     */
    function createImgKuai(src,old,closeFun){
        let imgList = createDom('div','imgList upkuai')
        let img = createDom('img')
        let imgclose = createDom('div','imgclose')
    
        img.onerror = function(){ //图片404处理
            this.dataset.errorsrc =  this.src
            this.src = defaultUrl
            this.onerror = null; 
        }
        img.src = src
        imgclose.dataset.img = imgIndex
        imgList.appendChild(img)
        imgList.appendChild(imgclose)
        listObj[imgIndex].src = src
        listObj[imgIndex].dom = imgList
        listObj[imgIndex].old = old
        imgIndex++
        
        imgclose.addEventListener("click",function(){
            closeFun && closeFun(this.dataset.img)
        })
        return imgList
    }


    // 创建input模块
    let fileAdd = createDom('div','fileAdd upkuai')
    let fileimg = createDom('img')
    fileimg.src = "../../img/xfm/add.jpg"
    let fileinput = createDom('input','fileinput')
    fileinput.type = 'file'
    fileAdd.appendChild(fileinput)
    fileAdd.appendChild(fileimg)
    // 图片路径错误处理
    fileimg.onerrr = function(){
        this.src = defaultUrl
        this.img.onerror = null; 
    }
    fileinput.addEventListener("change",function(e){
        upLoadings = false
        fileimg.src = "../../img/xfm/loadicon.png"
        fileimg.classList.add("loading")
        this.disabled = true
        
        if(!this.files.length){ // 选择文件后取消
            disabledinput()
            return 
        }

        // 判断图片张数
        if(Object.keys(listObj).length >= imgLimit){
            console.log("图片超出"+imgLimit +"张！！")
            imgNumFun && imgNumFun()
            disabledinput()
            return
        }
		
        
        // 多个文件上传管理
        
        var file = this.files[0]
        var type = file.type.split("/")[1] //图片格式

        // fileIpt.value 图片绝对路径
        // fileIpt.files 文件对象
        // fileIpt.files[0].name 文件名称
        // fileIpt.files[0].type 文件类型  单位b
        // fileIpt.files[0].size 文件大小

        // 判断是否图片文件
        if (file.type !== 'image/jpeg' && file.type !== 'image/jpg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            console.log('不是有效的图片文件!');
            imgTypeFun && imgTypeFun()
            disabledinput()
            return;
        }

        // console.log("file:",file)
        // console.dir(this)
        // 获取图片大小
        var size = Math.floor(file.size/1024)
        if(size > imgSize){
            console.log('图片太大!');
            imgSizeFun && imgSizeFun()
            disabledinput()
            return;
        }

        var reader = new FileReader();
        reader.onload = function(e) {
            // 图片转64位码
            var base64 = e.target.result;
            listObj[imgIndex] = {file:file,dom:"",base64file:"",type:type,name:file.name}
            listObj[imgIndex].base64file = base64
            
            // 添加节点
            var addkuai = createImgKuai(base64,false,function(index){
                listObj[index].dom.remove() // 移除节点
                delete listObj[index]
            })
            con.insertBefore(addkuai,fileAdd) //在前面插入
            disabledinput()
        }
        reader.readAsDataURL(file);
        
    })
    // 是否禁用input:file
    function disabledinput(){
        upLoadings = true
        fileinput.disabled = false
        fileimg.src = "../../img/xfm/add.jpg"
        fileimg.classList.remove("loading")
    }

    con.appendChild(fileAdd)

    // 渲染初始图片
    imgArr.forEach(item=>{
        listObj[imgIndex] = {}
        var addkuai = createImgKuai(item,true,function(index){
            listObj[index].dom.remove() // 移除节点
            delete listObj[index]
        })
        con.insertBefore(addkuai,fileAdd) //在前面插入
    })

    function imgFile(){
        return listObj
    }

    return {
        imgFile
    }
}

css

.uploading{
    display: flex;
    flex-wrap: wrap;
}
.uploading>div{
    margin-right: 10px;
}
.uploading img{
    width: 100%;
    height: 100%;
}

.upkuai{
    width: 50px;
    height: 50px;
}
.imgList{
    position: relative;
}
.imgList .imgclose{
    display:none;
    position: absolute;
    top: -6px;
    right: -6px;
    background-color: red;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
}
.imgList:hover .imgclose{
    display: block;
}

.fileAdd{
    border: 1px solid gray;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.fileAdd input{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.fileAdd .loading{
    width: 30px;
    height: 30px;
    margin: 9px auto;
    display: block;
    cursor: wait;
    animation: myRolate 1.5s linear infinite;
}
@keyframes myRolate{
    form{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}