关于webuploader的自定义使用

百度的图片上传插件功能强大，但是整合到自己的项目还是有些不能满足需求，只能自己一点点修改。

成品如下：

上传成功后图片回显

图片预览

如果超过自定义上传数量，会有提示

以下是相关demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">


<title>Tribe</title>

<link rel="stylesheet" type="text/css" href="/static/js/plugins/webuploader/css/webuploader.css"/>
<link rel="stylesheet" type="text/css" href="/static/js/plugins/webuploader/css/style.css"/>
<link rel="stylesheet" type="text/css" href="/static/css/layui.css"/>
<link href="/static/js/plugins/fancybox/jquery.fancybox.css"
      rel="stylesheet" />

<link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet"/>

<script src="/static/js/jquery.min.js?v=2.1.4"></script>

<script th:src="@{/static/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/static/js/plugins/fancybox/jquery.fancybox.js}"></script>
<script type="text/javascript" src="/static/js/plugins/webuploader/js/webuploader.js"></script>
<script type="text/javascript" src="/static/js/lin/fm/upload.js"></script>

    <title>Tribe</title>


    <style>
        /* Additional style to fix warning dialog position */
        #alertmod_table_list_2 {
            top: 900px !important;
        }
    </style>
</head>

<head>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox({
                openEffect : "none",
                closeEffect : "none"
            })
        });
        $(function(){
            get();
        })
        function get() {
            var wuploader;
            var urlArray = [];// 全局url变量
            var a = '#uploader';
            var p = '#filePicker';
            var o = '#filePicker2';
            var u = '/uploadFileToFast';
            var drawcontent = '#moduleGallery';
            var imagedata = "#picture";
            // 初始化上传插件
            $("#uploader").show();
            $("#moduleGallery").html("");
            urlArray.splice(0, urlArray.length);
            if ($("#picture").val() !== '') {
                urlArray.push($("#picture").val());
            }
            wuploader = initWebUploaderUI(a, p, o, u, 0, wuploader, urlArray, drawcontent, imagedata);
        }
    </script>
</head>
<style>
    /* Additional style to fix warning dialog position */
    #alertmod_table_list_2 {
        top: 900px !important;
    }
</style>
<body class="gray-bg">

<input type="hidden" name="picture" value="/picture/70a54bbdc6e0304c8f1b65f6687a5b6.jpg" id="picture"/>
<div id="moduleGallery" class="moduleGallery commonWebUploader"></div>

</body>


</html>

涉及到的js,css会有分享

https://files.cnblogs.com/files/fengwenzhee/webuploaderResource.zip