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