关于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
标签：wuploader,function,自定义,picture,webuploader,关于,urlArray,var,上传 来源： https://www.cnblogs.com/fengwenzhee/p/15388819.html