layui如何對上傳文件進行操作

本篇文章展示了layui對上傳文件的操作，代碼簡明扼要容易理解，如果在日常工作遇到這個疑問。希望大家通過這篇文章，找到解決疑問的辦法。

單文件上傳

1、HTML

<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        <div id="uploadQRcode" class="layui-upload">
                        <button type="button" class="layui-btn" id="uploadQR">
                            <i class="layui-icon">&#xe67c;</i>上傳客服二維碼<span style="color: red;font-size: 20px;">*</span>
                        </button>
                        <div class="layui-upload-list">
                            <img id="qrshow" src="" alt="" class="layui-upload-img"
                                 style="height: 100px;width:100px;border:1px solid black;">
                        </div>
                        <div id="startDiv">
                            <button type="button" class="layui-btn" id="startUploadQR">開始上傳</button>
                        </div>
                            <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳一張圖片, 單張圖片的大小不超過2MB</div>
                    </div>
                    <input type="text" name="cli_qrcode" id="qrInput" style="display: none;" lay-verify="required">
</blockquote>

2、js部分

layui.use(['form', 'element', 'upload'], function () {
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;

        //單文件示例  選完文件后不自動上傳
        var uploadSingle = upload.render({
            elem: '#uploadQR'
            , url: '/web/api/upload/upload?option=4'
            , accept: 'images'  // 允許上傳的文件類型
            , size: 2048        // 最大允許上傳的文件大小  單位 KB
            , auto: false
            , bindAction: '#startUploadQR'
            , choose: function (obj) {
                //預讀本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#qrshow').attr('src', result); //圖片鏈接（base64）
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    //上傳成功
                    $("#qrInput").val(res.data[0].fp_relative);
                    var startDiv = $('#startDiv');
                    startDiv.html('<span style="color: #5FB878;">上傳成功</span>');
                } else {
                    this.error(index, upload);
                }
            }
            , error: function (index, upload) {
                //演示失敗狀態，并實現重傳
                var startDiv = $('#startDiv');
                startDiv.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>');
                startDiv.find('.demo-reload').on('click', function () {
                    uploadSingle.upload();
                });
            }
        });
    });

多圖片的上傳

1、HTML

<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        <div id="uploadImg" class="layui-upload">
                        <button type="button" class="layui-btn" id="upload">
                            <i class="layui-icon">&#xe67c;</i>上傳商鋪圖片<span style="color: red;font-size: 20px;">*</span>
                        </button>
                        <div class="layui-upload-list">
                            <table class="layui-table" style="text-align: center;">
                                <thead>
                                <tr>
                                    <th style="text-align: center;">圖片預覽</th>
                                    <th style="text-align: center;">大小</th>
                                    <th style="text-align: center;">狀態</th>
                                    <th style="text-align: center;">操作</th>
                                </tr>
                                </thead>
                                <tbody id="imgList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="startUpload">開始上傳</button>
                            <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳六張圖片, 單張圖片的大小不超過5MB, 長寬比例推薦1.5:1,
                                推薦上傳圖片長675px,寬450px
                            </div>
                    </div>
                    <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required">
</blockquote>

2、js部分

layui.use(['table', 'form', 'element', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;
        
        //多文件列表示例
        var demoListView = $('#imgList');
        var totalArray = new Array();
        var uploadInst = upload.render({
            elem: '#upload' //綁定元素
            , url: '/web/api/upload/upload?option=3' //上傳接口
            , accept: 'images'  // 允許上傳的文件類型
            // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式，多個用逗號隔開),
            , size: 5120        // 最大允許上傳的文件大小  單位 KB
            , auto: false //選擇文件后不自動上傳
            , bindAction: '#startUpload' //指向一個按鈕觸發上傳
            , multiple: true   // 開啟多文件上傳
            , number: 6    //  同時上傳文件的最大個數
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
                var arr = Object.keys(files);
                totalArray = totalArray.concat(arr);
                // 檢查上傳文件的個數
                if (totalArray.length <= 6) {
                    //讀取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td><img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="height: 66px;width:100px;"></td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上傳</td>'
                            , '<td>'
                            , '<button class="layui-btn demo-reload layui-hide">重傳</button>'
                            , '<button class="layui-btn layui-btn-danger demo-delete">刪除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //單個重傳
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //刪除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //刪除對應的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現同名文件不可選
                        });

                        demoListView.append(tr);
                    });
                } else {
                    // 超出上傳最大文件
                    layer.msg("上傳文件最大不超過6個")
                }

            }
            , done: function (res, index, upload) {
                console.log("res", res);
                if (res.code == 0) { //上傳成功
                    // 上傳成功后將圖片路徑拼接到input中，多個路徑用","分割
                    var inputVal = document.getElementById("imgInput").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.data[0].fp_relative;
                    } else {
                        valData = res.data[0].fp_relative;
                    }
                    document.getElementById("imgInput").value = valData;
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //刪除文件隊列已經上傳成功的文件

                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
            }
        });
    });

添加頁面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加商鋪</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{static_url('layui/css/layui.css')}}" media="all">
</head>
<body>
<div style="margin-top: 30px;">

    <form class="layui-form layui-form-pane">
        <div>
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <div>
                    <label>商鋪名稱<span style="color: red;font-size: 20px;">*</span></label>
                    <div>
                        <input type="text" lay-verify="required" name="name" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <div>
                    <label>商鋪編號</label>
                    <div>
                        <input type="text" name="code" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <div>
                    <label>詳細地址<span style="color: red;font-size: 20px;">*</span></label>
                    <div>
                        <input type="text" name="address" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <div>
                    <label>聯系方式<span style="color: red;font-size: 20px;">*</span></label>
                    <div>
                        <input type="text" name="contact" required lay-verify="required|phone" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <div>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        <div id="uploadQRcode">
                        <button type="button" id="uploadQR">
                            <i>&#xe67c;</i>上傳客服二維碼<span style="color: red;font-size: 20px;">*</span>
                        </button>
                        <div>
                            <img id="qrshow" src="" alt=""
                                 style="height: 100px;width:100px;border:1px solid black;">
                        </div>
                        <div id="startDiv">
                            <button type="button" id="startUploadQR">開始上傳</button>
                        </div>
                            <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳一張圖片, 單張圖片的大小不超過2MB</div>
                    </div>
                    <input type="text" name="cli_qrcode" id="qrInput" style="display: none;" lay-verify="required">
                    </blockquote>

                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs8 layui-col-xs-offset2">
                <div>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        <div id="uploadImg">
                        <button type="button" id="upload">
                            <i>&#xe67c;</i>上傳商鋪圖片<span style="color: red;font-size: 20px;">*</span>
                        </button>
                        <div>
                            <table style="text-align: center;">
                                <thead>
                                <tr>
                                    <th style="text-align: center;">圖片預覽</th>
                                    <th style="text-align: center;">大小</th>
                                    <th style="text-align: center;">狀態</th>
                                    <th style="text-align: center;">操作</th>
                                </tr>
                                </thead>
                                <tbody id="imgList"></tbody>
                            </table>
                        </div>
                        <button type="button" id="startUpload">開始上傳</button>
                            <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳六張圖片, 單張圖片的大小不超過5MB, 長寬比例推薦1.5:1,
                                推薦上傳圖片長675px,寬450px
                            </div>
                    </div>
                    <input type="text" name="face_img" id="imgInput" style="display: none;" lay-verify="required">
                    </blockquote>

                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs8 layui-col-xs-offset2" style="margin-top: 30px;">

                <div>
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="addObject">確認保存</button>
                </div>
            </div>
        </div>
    </form>


</div>

<script src="{{static_url('layui/layui.js')}}" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'element', 'upload'], function () {
        var table = layui.table;
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;

        //單文件示例  選完文件后不自動上傳
        var uploadSingle = upload.render({
            elem: '#uploadQR'
            , url: '/web/api/upload/upload?option=4'
            , accept: 'images'  // 允許上傳的文件類型
            , size: 2048        // 最大允許上傳的文件大小  單位 KB
            , auto: false
            , bindAction: '#startUploadQR'
            , choose: function (obj) {
                //預讀本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#qrshow').attr('src', result); //圖片鏈接（base64）
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    //上傳成功
                    $("#qrInput").val(res.data[0].fp_relative);
                    var startDiv = $('#startDiv');
                    startDiv.html('<span style="color: #5FB878;">上傳成功</span>');
                } else {
                    this.error(index, upload);
                }
            }
            , error: function (index, upload) {
                //演示失敗狀態，并實現重傳
                var startDiv = $('#startDiv');
                startDiv.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>');
                startDiv.find('.demo-reload').on('click', function () {
                    uploadSingle.upload();
                });
            }
        });

        //多文件列表示例
        var demoListView = $('#imgList');
        var totalArray = new Array();
        var uploadInst = upload.render({
            elem: '#upload' //綁定元素
            , url: '/web/api/upload/upload?option=3' //上傳接口
            , accept: 'images'  // 允許上傳的文件類型
            // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式，多個用逗號隔開),
            , size: 5120        // 最大允許上傳的文件大小  單位 KB
            , auto: false //選擇文件后不自動上傳
            , bindAction: '#startUpload' //指向一個按鈕觸發上傳
            , multiple: true   // 開啟多文件上傳
            , number: 6    //  同時上傳文件的最大個數
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
                var arr = Object.keys(files);
                totalArray = totalArray.concat(arr);
                // 檢查上傳文件的個數
                if (totalArray.length <= 6) {
                    //讀取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td><img src="' + result + '" alt="' + file.name + '" style="height: 66px;width:100px;"></td>'
                            , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                            , '<td>等待上傳</td>'
                            , '<td>'
                            , '<button class="layui-btn demo-reload layui-hide">重傳</button>'
                            , '<button class="layui-btn layui-btn-danger demo-delete">刪除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //單個重傳
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //刪除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //刪除對應的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現同名文件不可選
                        });

                        demoListView.append(tr);
                    });
                } else {
                    // 超出上傳最大文件
                    layer.msg("上傳文件最大不超過6個")
                }

            }
            , done: function (res, index, upload) {
                console.log("res", res);
                if (res.code == 0) { //上傳成功
                    // 上傳成功后將圖片路徑拼接到input中，多個路徑用","分割
                    var inputVal = document.getElementById("imgInput").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.data[0].fp_relative;
                    } else {
                        valData = res.data[0].fp_relative;
                    }
                    document.getElementById("imgInput").value = valData;
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上傳成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //刪除文件隊列已經上傳成功的文件

                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上傳失敗</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
            }
        });
        form.on("submit(addObject)", function (data) {
            $.ajax({
                url: "/web/api/seller/add",
                type: "post",
                data: data.field,
                dataType: "json",
                success: function (response) {
                    if (response["code"] == 0) {
                        layer.msg("添加成功", {
                            icon: 1,
                            time: 2500 // 默認三秒
                        }, function () { // 關閉回調，關閉層刷新頁面
                            var index = parent.layer.getFrameIndex(window.name);  // 先得到當前iframe層的索引
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(response["msg"], {
                            icon: 1,
                            time: 1500 // 1.5秒，默認三秒
                        });
                    }
                    return false;
                },
                error: function (response) {
                    layer.msg(response["msg"], {
                        icon: 1,
                        time: 1500 // 1.5秒，默認三秒
                    });
                }
            });

            return false; // 關閉表單提交
        });
    });
</script>
</body>
</html>

編輯頁面

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>編輯商鋪</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="{{static_url('layui/css/layui.css')}}" media="all">
</head>
<body>
<div style="margin-top: 30px;">
    <form class="layui-form layui-form-pane" lay-filter="updateForm">
        <input type="text" name="seller_id" lay-verify="required" style="display: none;">
        <div>
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <div>
                    <label>商鋪名稱</label>
                    <div>
                        <input type="text" lay-verify="required" name="name" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <div>
                    <label>商鋪編號</label>
                    <div>
                        <input type="text" name="code" autocomplete="off">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <div>
                    <label>詳細地址</label>
                    <div>
                        <input type="text" name="address" required lay-verify="required" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <div>
                    <label>聯系方式</label>
                    <div>
                        <input type="text" name="contact" required lay-verify="required|phone" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <div>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        <div id="uploadQRcode">
                            <div>
                                <img id="qrshow" src="" alt=""
                                     style="height: 100px;width:100px;border:1px solid black;">
                            </div>
                            <div>
                                <div>
                                    <button type="button" class="layui-btn layui-btn-sm" id="uploadQR">
                                        <i>&#xe67c;</i>修改客服二維碼
                                    </button>
                                </div>
                                <div id="startDiv">
                                    <button type="button" class="layui-btn layui-hide layui-btn-sm" id="startUploadQR"
                                            style="margin-left: 30px;">開始上傳
                                    </button>
                                </div>
                            </div>
                            <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳一張圖片, 單張圖片的大小不超過2MB</div>
                        </div>
                        <input type="text" name="old_cli_qrcode" style="display: none;">
                        <input type="text" name="cli_qrcode" id="qrInput" lay-verify="required" style="display: none;">
                    </blockquote>
                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs10 layui-col-xs-offset1">
                <div>
                    <div id="uploadImg">
                        <div>
                            <table style="text-align: center;">
                                <thead>
                                <tr>
                                    <th style="text-align: center;">圖片預覽</th>
                                    <th style="text-align: center;">狀態</th>
                                    <th style="text-align: center;">操作</th>
                                </tr>
                                </thead>
                                <tbody id="imgList"></tbody>
                            </table>
                        </div>
                        <div>
                            <div>
                                <button type="button" class="layui-btn layui-btn-sm" id="upload">
                                    <i>&#xe67c;</i>添加商鋪圖片
                                </button>
                            </div>
                            <div class="layui-col-xs3 layui-col-xs-offset5">
                                <button type="button" class="layui-btn layui-btn-fluid layui-btn-sm" id="startUpload">
                                    開始上傳
                                </button>
                            </div>
                        </div>
                        <div style="color: #c2c2c2;margin:10px 0;">溫馨提示: 每次最多上傳六張圖片, 單張圖片的大小不超過5MB, 長寬比例推薦1.5:1,
                            推薦上傳圖片長675px,寬450px
                        </div>
                    </div>
                    <input type="text" name="old_face_img" style="display: none;">
                    <input type="text" name="face_img" id="imgInput" lay-verify="required" style="display: none;">
                </div>
            </div>
        </div>
        <div>
            <div class="layui-col-xs10 layui-col-xs-offset1" style="margin-top: 30px;">
                <div>
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="addObject">確認保存</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="{{static_url('layui/layui.js')}}" charset="utf-8"></script>
<!-- 注意：如果你直接復制所有代碼到本地，上述js路徑需要改成你本地的 -->

<script>
    layui.use(['form', 'element', 'jquery', 'upload'], function () {
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;
        var upload = layui.upload;

        //單文件示例  選完文件后不自動上傳
        var uploadSingle = upload.render({
            elem: '#uploadQR'
            , url: '/web/api/upload/upload?option=4'
            , accept: 'images'  // 允許上傳的文件類型
            , size: 2048        // 最大允許上傳的文件大小  單位 KB
            , auto: false
            , bindAction: '#startUploadQR'
            , choose: function (obj) {
                //預讀本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#qrshow').attr('src', result); //圖片鏈接（base64）
                });
            }
            , done: function (res, index, upload) {
                if (res.code == 0) {
                    //上傳成功
                    $("#qrInput").val(res.data[0].fp_relative);
                    $("#uploadQR").addClass("layui-hide");
                    var startDiv = $('#startDiv');
                    startDiv.html('<span style="color: #5FB878;font-size: 17px;">修改成功</span>');
                } else {
                    this.error(index, upload);
                }
            }
            , error: function (index, upload) {
                //演示失敗狀態，并實現重傳
                var startDiv = $('#startDiv');
                startDiv.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>');
                startDiv.find('.demo-reload').on('click', function () {
                    uploadSingle.upload();
                });
            }
        });

        //多文件列表示例
        var demoListView = $('#imgList');
        var totalArray = new Array();
        var uploadInst = upload.render({
            elem: '#upload' //綁定元素
            , url: '/web/api/upload/upload?option=3' //上傳接口
            , accept: 'images'  // 允許上傳的文件類型
            // , acceptMime: 'image/jpg,image/png'   // (只支持jpg和png格式，多個用逗號隔開),
            , size: 5120        // 最大允許上傳的文件大小  單位 KB
            , auto: false //選擇文件后不自動上傳
            , bindAction: '#startUpload' //指向一個按鈕觸發上傳
            , multiple: true   // 開啟多文件上傳
            , number: 6    //  同時上傳文件的最大個數
            , choose: function (obj) {
                var files = this.files = obj.pushFile(); //將每次選擇的文件追加到文件隊列
                var totalArray = Object.keys(files);
                // 檢查上傳文件的個數
                if (totalArray.length < (7 - demoListView.data("choiceTotal"))) {
                    //讀取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td><img src="' + result + '" alt="' + file.name + '" style="height: 66px;width:100px;"></td>'
                            , '<td>等待上傳</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-sm demo-reload layui-hide">重傳</button>'
                            , '<button class="layui-btn layui-btn-sm layui-btn-danger demo-delete">刪除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //單個重傳
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //刪除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //刪除對應的文件
                            tr.remove();
                            uploadInst.config.elem.next()[0].value = ''; //清空 input file 值，以免刪除后出現同名文件不可選
                            totalArray.splice(totalArray.indexOf(index), 1);
                        });
                        demoListView.append(tr);
                    });
                } else {
                    // 超出上傳最大文件
                    layer.msg("上傳文件最大不超過6個");
                    totalArray.pop();
                }
            }
            , done: function (res, index, upload) {
                if (res.code == 0) { //上傳成功
                    // 上傳成功后將圖片路徑拼接到input中，多個路徑用","分割
                    var inputVal = document.getElementById("imgInput").value;
                    var valData = "";
                    if (inputVal) {
                        valData = inputVal + "," + res.data[0].fp_relative;
                    } else {
                        valData = res.data[0].fp_relative;
                    }
                    document.getElementById("imgInput").value = valData;
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(1).html('<span style="color: #5FB878;">上傳成功</span>');
                    tds.eq(2).html(''); //清空操作
                    return delete this.files[index]; //刪除文件隊列已經上傳成功的文件
                }
                this.error(index, upload);
            }
            , error: function (index, upload) {
                var tr = demoListView.find('tr#upload-' + index)
                    , tds = tr.children();
                tds.eq(1).html('<span style="color: #FF5722;">上傳失敗</span>');
                tds.eq(2).find('.demo-reload').removeClass('layui-hide'); //顯示重傳
            }
        });

        // 監聽修改客服二維碼事件
        $("#uploadQR").on("click", function () {
            $("#startUploadQR").removeClass('layui-hide');
        });

        // 處理圖片的修改
        demoListView.on('click', '.edit-btn', function () {
            var csid = $(this).attr("csid");
            var startid = $(this).attr("startid");
            var currentIndex = parseInt(csid.split("_")[1]);
            var $currentTr = $(this).parent().parent();
            $(this).addClass("layui-hide");
            $("#" + csid).removeClass("layui-hide");
            $("#" + startid).removeClass("layui-hide");
            var uploadEdit = upload.render({
                elem: '#' + csid
                , url: '/web/api/upload/upload?option=3'
                , accept: 'images'  // 允許上傳的文件類型
                , size: 2048        // 最大允許上傳的文件大小  單位 KB
                , auto: false
                , bindAction: '#' + startid
                , choose: function (obj) {
                    //預讀本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $currentTr.children().eq(0).html('<img src="' + result + '" alt="" style="height: 66px;width:100px;">') //圖片鏈接（base64）
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code == 0) {
                        //上傳成功
                        var InputTag = $("#imgInput");
                        var oldInputStrList = InputTag.val().split(",");
                        oldInputStrList[currentIndex] = res.data[0].fp_relative;
                        var newInputStr = oldInputStrList.join(",");
                        InputTag.val(newInputStr);
                        $currentTr.children().eq(1).text("修改成功");
                        $currentTr.children().eq(2).html("");
                    } else {
                        this.error(index, upload);
                    }
                }
                , error: function (index, upload) {
                    //演示失敗狀態，并實現重傳
                    var fileHtml = '<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload" style="width:50px;height:30px;text-align:center;line-height:30px;">重試</a>';
                    $currentTr.children().eq(2).html(fileHtml);
                    $currentTr.find('.demo-reload').on('click', function () {
                        uploadEdit.upload();
                    });
                }
            });
        });

        // 處理圖片的刪除
        demoListView.on("click", '.delete-btn', function () {
            var delid = this.id;
            var currentDelIndex = parseInt(delid.split("_")[1]);
            var theCurrentTr = $(this).parent().parent();
            // 更新表格中當前行后面每一行的序號
            // 找到當前行后面的每一行
            theCurrentTr.nextAll().each(function () {
                // each中的this和外面的this不一樣了!
                var oldCsid = $(this).children().eq(2).find(".edit-btn").attr("csid");
                var oldStarid = $(this).children().eq(2).find(".edit-btn").attr("startid");
                var oldChoiceid = $(this).children().eq(2).find(".choice-btn").attr("id");
                var oldUploadid = $(this).children().eq(2).find(".upload-btn").attr("id");
                var oldDelid = $(this).children().eq(2).find(".delete-btn").attr("id");
                if (oldDelid && oldCsid) {
                    $(this).children().eq(2).find(".edit-btn").attr("csid", oldCsid.split("_")[0] + "_" + (oldCsid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".edit-btn").attr("startid", oldStarid.split("_")[0] + "_" + (oldStarid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".choice-btn").attr("id", oldChoiceid.split("_")[0] + "_" + (oldChoiceid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".upload-btn").attr("id", oldUploadid.split("_")[0] + "_" + (oldUploadid.split("_")[1] - 1));
                    $(this).children().eq(2).find(".delete-btn").attr("id", oldDelid.split("_")[0] + "_" + (oldDelid.split("_")[1] - 1));
                }
            });
            // 找到當前行,刪除
            theCurrentTr.remove();
            // 修改新的input框中的值
            var delInputTag = $("#imgInput");
            var oldDelInputStrList = delInputTag.val().split(",");
            oldDelInputStrList.splice(currentDelIndex, 1);
            var delnewInputStr = oldDelInputStrList.join(",");
            delInputTag.val(delnewInputStr);
            // 修改全局可上傳文件的總個數
            var $currentTotal = demoListView.data("choiceTotal");
            demoListView.data("choiceTotal", $currentTotal - 1);
        });

        // 填充管理員詳情
        $.ajax({
            url: "/web/api/seller/detail?seller_id={{seller_id}}",
            type: "get",
            dataType: "json",
            success: function (response) {
                console.log(response);
                $("#qrshow").attr("src", response.data.qrcode_url);
                var faceList = response.data.face_url_list;
                demoListView.data("choiceTotal", faceList.length);
                if (faceList) {
                    for (var i = 0; i < faceList.length; i++) {
                        var trEle = document.createElement("tr");
                        var trHtml = '<td><img src="' + faceList[i] + '" alt="" style="height: 66px;width:100px;"></td>'
                            + '<td>等待修改</td><td><button type="button" class="layui-btn layui-btn-sm edit-btn" csid="choice_' + i
                            + '" startid="startUpload_' + i + '">修改</button><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-hide choice-btn" id="choice_' + i
                            + '" style="margin-right: 10px;">選擇圖片</button><button type="button" class="layui-btn layui-btn-sm layui-hide upload-btn" id="startUpload_' + i + '">上傳</button>' +
                            '<button type="button" class="layui-btn layui-btn-sm delete-btn" id="delete_' + i + '">刪除</button></td>';
                        trEle.innerHTML = trHtml;
                        $("#imgList").append(trEle);
                    }
                }
                form.val("updateForm", {
                    "seller_id": response.data.id,
                    "name": response.data.name,
                    "code": response.data.code,
                    "address": response.data.address,
                    "contact": response.data.contact,
                    "cli_qrcode": response.data.cli_qrcode,
                    "old_cli_qrcode": response.data.cli_qrcode,
                    "face_img": response.data.face_img,
                    "old_face_img": response.data.face_img
                });
                form.render();
            }
        });

        // 綁定提交事件
        form.on("submit(addObject)", function (data) {
            $.ajax({
                url: "/web/api/seller/update",
                type: "post",
                data: data.field,
                dataType: "json",
                success: function (response) {
                    if (response["code"] == 0) {
                        layer.msg("更新成功", {
                            icon: 1,
                            time: 1500 // 1.5秒，默認三秒
                        }, function () { // 關閉回調，關閉層刷新頁面
                            var index = parent.layer.getFrameIndex(window.name);  // 先得到當前iframe層的索引
                            parent.layer.close(index);
                        });
                    } else {
                        layer.msg(response["msg"], {
                            icon: 1,
                            time: 1500 // 1.5秒，默認三秒
                        });
                    }

                    return false;
                },
                error: function (response) {
                    layer.msg(response["msg"], {
                        icon: 1,
                        time: 1500 // 1.5秒，默認三秒
                    });
                    return false;
                }
            });

            return false; // 關閉表單提交(注意：此處不能省略，此處不能省略，此處不能省略。。。 否則頁面刷新有問題)
        });
    });


</script>
</body>
</html>

以上就是layui對上傳文件的操作，詳細使用情況還得要大家自己使用過才能知道具體要領。如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！