js 封装文件上传图片上次多张/单张上传

本文链接：https://blog.csdn.net/weixin_42448623/article/details/106764212

效果

在这里插入图片描述

使用

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单张/多个图片上传</title>
    <link rel="stylesheet" href="./loadFileImg.css">
    <script src="./loadFileImg.js"></script>
    <style>

    </style>
</head>
<body>
    
    <div class="uploading">

    </div>
    <div class="brn">获取文件信息</div>

    <script>
        var con = document.querySelector(".uploading")
        var brn = document.querySelector(".brn")

        
        var files = upLoading({
    
            con:con,
            imgArr:[],
            imgLimit:4,
            imgSize:300,
            isMultiSelect:true,
            defaultUrl:'',
            success:function(res){
    
                console.log("文件选择成功！",res);
            },
            errFun:function(err){
    
                if(err){
     //排除图片数量超出回调
                    // 选择了一个文件错误处理
                    if(err.length == 1){
    
                        toastr.warning(err[0].errMsg)
                    }
                }
                console.log("文件选择失败",err);
            },
            delFun:function(obj,init){
    
                console.log("文件删除成功！",obj,init);
            },
            imgSizeFun:function(file){
     //图片大小超出回调 选择一张图片的处理
                console.log("单选 图片大小超出");
            },
            imgTypeFun:function(){
     //图片类型错误回调 
                console.log("单选 文件类型错误");
            },
            imgNumFun:function(){
     //图片数量超出回调
                console.log("文件数量超出");
            },
            errListFun:function(list){
    
                console.log("多选 错误回调",list);
                // 所有图片全部阵亡
                if(list.length == files.length){
    

                }
            },
           
        })
        brn.addEventListener("click",function(){
    
            console.log(files.imgFile())
            console.log(files