【LayerUI】上傳圖片（多圖，非拖拽）

 

 

原理：用upload.render() 組件實現上傳，服務端保存好圖片返回路徑，這種只適合上傳即保存的功能，如果想上傳多張后再一次保存，不建議使用。

<script>
                //多圖上傳
                layui.use('upload', function () {
                    var $ = layui.jquery
                    , upload = layui.upload;
                    var uploadInstss = upload.render({
                        elem: "#uploadPic"
                        , multiple: true
                        , url: '接口地址'
                        , exts: 'jpg|png' //只允許圖片
                        , done: function (res) {
                            $("#noMsgDIV").hide();
                            //如果上傳失敗
                            if (res.code > 0)
                            {
                                return layer.msg('上傳失敗');
                            }
                            //上傳成功
                            if (!res.error) {
                                AppendPic(res.FileName)
                            }
                        }
                        , error: function () {
                            //演示失敗狀態，並實現重傳
                            var demoText = $('#demoText');
                            demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                            demoText.find('.demo-reload').on('click', function () {
                                uploadInst.upload();
                            });
                        }
                    });
                })

            function AppendPic(FileName) {
                    if ($(".contentpic").length >= 5) {
                        return layer.msg('最多上傳5張圖片。');
                    }
                    var html = "<div class=\"contentpic\" style=\"display: inline-block;margin:7px;\">" +
                                "<img src=\"" + FileName + "\" style=\"width:240px;height:120px;\" />" +
                                "<div onclick=\"delPic(this)\" class=\"layui-btn layui-btn-sm layui-btn-normal delbtn\"><i class=\"layui-icon\"></i>刪 除</div>" +
                                "</div>";

                    var abhtml = $("#Big_ContentPic").html();

                    abhtml += html;
                    $("#Big_ContentPic").html(abhtml)
                }

                function delPic(thisObj) {
                    $(thisObj).parent().remove();
　　　　　　　　　　　　//這里可寫成刪除圖片ajax請求
                }
</script>