v2.tiantianxinye.365care/resources/views/plugins/uploader.blade.php

@push("header")
    <link href="/plugins/webuploader/webuploader.css" rel="stylesheet" type="text/css"/>
@endpush

@push("footer")
    <script src="/plugins/webuploader/webuploader.nolog.js"></script>
    <script>
        $(document).ready(function () {
            window.uploaders = [];
            $(".uploader,[data-plugin=uploader]").each(function () {
                $(this).wrap("<div class='col-10 pl-0'></div>");
                var index = window.uploaders.length;
                var picker_id = "uploader-picker-" + index;

                if ($(this).attr("value") != "" && $(this).attr("value") != undefined) {
                    $(this).before("<div class='uploader-old-list'></div>");
                    //todo:多图预览
                    $(this).prev(".uploader-old-list").append("<div class='file-item'><img src='/storage/" + $(this).attr("value") + "'></div>");
                    $(this).prev(".uploader-old-list").append("<div class='clearfix'></div>");
                }
                $(this).attr({"data-uploader-index": index});
                $(this).after("<div data-uploader-index='" + index + "' id='" + picker_id + "'></div><div class='uploader-list' data-uploader-index='" + index + "'></div><div class='clearfix'></div>");
                var _token = $("meta[name=csrf-token]").attr("content");

                //todo:more options
                var options_default = {
                    uploaderIndex: index,
                    formData: {
                        _token: _token
                    },
                    // swf文件路径
                    swf: '/plugins/webuploader/Uploader.swf',
                    // 文件接收服务端。
                    server: '/admin/upload',
                    auto: true,
                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                    resize: false,
                    multiple: false,
                    fileNumLimit: 1
                };

                var options = $(this).attr("data-uploader-options");
                if (options == undefined) {
                    options = {};
                } else {
                    options = JSON.parse('{' + options + '}');
                }
                options.pick = {
                    id: "#" + picker_id,
                    innerHTML: "<button class='btn btn-sm btn-success'>选择文件</button>"
                };

                options = $.extend(options_default, options);
                console.log(options);
                window.uploaders[index] = WebUploader.create(options);
                window.uploaders[index].on('fileQueued', function (file) {
                    var index = this.options.uploaderIndex;
                    var $list = $(".uploader-list[data-uploader-index=" + index + "]");
                    var $one = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info">' + file.name + '</div>' +
                        '</div>'
                        ),
                        $img = $one.find('img');

                    // $list为容器jQuery实例
                    $list.append($one);

                    // 创建缩略图
                    // todo:如果为非图片文件，修改此方法，以适配各种文件。
                    // thumbnailWidth x thumbnailHeight 为 100 x 100
                    window.uploaders[index].makeThumb(file, function (error, src) {
                        if (error) {
                            $img.replaceWith('<span>不能预览</span>');
                            return;
                        }
                        $img.attr('src', src);
                    }, 100, 100);
                });

                // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                window.uploaders[index].on('uploadSuccess', function (file) {
                    $('#' + file.id).addClass('upload-state-done');
                });

                // 文件上传失败，显示上传出错。
                window.uploaders[index].on('uploadError', function (file) {
                    var $li = $('#' + file.id),
                        $error = $li.find('div.error');

                    // 避免重复创建
                    if (!$error.length) {
                        $error = $('<div class="error"></div>').appendTo($li);
                    }

                    $error.text('上传失败');
                });

                // 完成上传完了，成功或者失败，先删除进度条。
                window.uploaders[index].on('uploadComplete', function (file) {
                    $('#' + file.id).find('.progress').remove();
                });

                window.uploaders[index].on('uploadSuccess', function (file, data) {
                    var index = this.options.uploaderIndex;
                    $('input[data-uploader-index=' + index + ']').val(data.savename);
                });

                //根据options设置元素本身
                if (!options.multiple) {
                    $(this).attr("type", "hidden").hide();
                }
            });
        });
    </script>
@endpush