LayUI集成FraUpload插件实现多图片上传，超简单实用！

LayUI中集成FraUpload插件实现多图片上传，并可拖动图片进行排序

实现效果如下：

使用方法

1.在html中加下如下代码

<div class="layui-form-item">
        <label class="layui-form-label">帖子图片：</label>
       <!-- <div id="show_images2">-->

<!--        </div>-->
        <div class="layui-input-inline layui-btn-container" style="width: auto; margin-top:-10px;">
            <button type="button" class="layui-btn layui-btn-primary" id="upload_duixiang">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <label style="padding: 5px 15px; display: block;">(推荐尺寸：800 X 800)</label>

        <div class="show">   //图片输出位置

        </div>
    </div>
           

2. 引用JS和CSS文件

<script type="text/javascript" src="../manager/js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../manager/css/FraUpload.css">
<script type="text/javascript" src="../manager/js/FraUpload.js"></script>
<script type="text/javascript" src="../manager/js/MD5.js"></script>
<script src="../manager/js/Sortable/Sortable.js"></script>
           

3.实例化js对象

用法：

// 商品图片上传
a = $("#upload_duixiang").FraUpload({
    view        : ".show",      // 视图输出位置
    url         : "upload.php", // 上传接口
    fetch       : "img",   // 视图现在只支持img
    debug       : false,    // 是否开启调试模式
    /* 外部获得的回调接口 */
    onLoad: function(e){                    // 选择文件的回调方法
        console.log("外部: 初始化完成...");
    },
    breforePort: function (e) {         // 发送前触发
        console.log("文件发送之前触发");
    },  
    successPort: function (e) {         // 发送成功触发
        console.log("文件发送成功");
        onload_image()
    },
    errorPort: function (e) {       // 发送失败触发
        console.log("文件发送失败");
        onload_image()
    },
    deletePost: function(e){    // 删除文件触发
        console.log("删除文件");
        console.log(e);
        alert('删除了'+e.filename)
        onload_image()
    },
    sort: function(e){      // 排序触发
        console.log("排序");
        onload_image()
    },
});
           

实际应用：

var commodityUploadObj;
    
    function loadMultiUpload(){
        // 帖子图片上传
        $('.show').html('');
        commodityUploadObj = $("#upload_duixiang").FraUpload({
            view        : ".show",      // 视图输出位置
            url         : "../../file/uploadMultipart", // 上传接口
            fetch       : "img",   // 视图现在只支持img
            debug       : false,    // 是否开启调试模式
            //def: ['https://cdn.ebiaoji.com/weima/20200731/1596186936839.jpg', 'https://cdn.ebiaoji.com/weima/20200731/1596186940920.jpg', 'https://cdn.ebiaoji.com/weima/20200731/1596186944995.jpg'],
            def: show_images2,
            successPort: function (e) {         // 发送成功触发
                console.log("文件发送成功");
            }, deletePost: function(e){    // 删除文件触发
            },
        });
    }
           

4. 更新表单数据

用法：

// 获取图片上传信息
function onload_image(){
    var res = a.FraUpload.show()
    var ids = [];
    for(let k in res){
        this_val = res[k]
        if(!empty(res[k]['is_upload']) && !empty(res[k]['ajax'])){  //empty方法详见5.中
            ajax_value = res[k]['ajax'];
            ids.push(ajax_value.data.id)
        }
    }
    $("#imagepath").val(ids);
    $('#geoJsonTxt').html(JsonFormat(res));
}
           

实际应用：

// 获取图片上传信息
    function onload_image(){
        console.log($(commodityUploadObj).html());
        var res = $(commodityUploadObj)[0].files_all;
        var ids = [];
        for(let k in res){
            this_val = res[k]
            if(!empty(res[k]['is_upload']) && !empty(res[k]['ajax'])){  //empty方法详见5.中
                ajax_value = res[k]['ajax'];
                ids.push(ajax_value.data.filepath)
            }
        }
        show_images2 = ids;   //这里的show_images2 对应于实例化js对象中def: show_images2中的show_images2
    }
           

5.上述JS需要的方法

/**
  * 判断变量是否为空
  */
    function empty(value) {
        if(value=="" || value==undefined || value==null || value==false || value==[] || value=={}){
            return true;
        }else{
            return false;
        }
    }
           

6.函数调用

在需要使用多图片上传的地方调用

loadMultiUpload();

，在需要获取上传图片信息的地方调用

onload_image();

我这里是在打开新增帖子成功后就调用 ，如图：

具体的根据自己的情况而定

FraUpload上传图片所引用的文件自行下载：

https://download.csdn.net/download/qq_44799924/19663031