1.需求
多图片上传,用户自己设置上传图片的顺序
2. 参考
webuploader上传遇到的问题
webuploader 上传插件（根据官方做了小改）
3. 上代码
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="${ctx }/resources/webuploader/font-awesome.min.css">
<link rel="stylesheet" type="text/css"
href="${ctx }/resources/webuploader/webuploader.css">
<link rel="stylesheet" type="text/css"
href="${ctx }/resources/webuploader/upload.css?t=11111">
<link href="${ctx}/resources/assets/global/plugins/bootstrap-sweetalert/sweetalert.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mark"></div>
<div class="panel panel-default" id="panel">
<div class="panel-body">
<div id="uploadFrom">
<div id="uploader" class="uploader">
<%-- 拖拽上传区域 --%>
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="picker"></div>
</div>
</div>
<div class="statusBar" style="border-top: 0px; border-bottom: 1px solid #dadada;">
<font color="red">（如需调整顺序,请通过拖拽图片调整）</font>
<div class="progress">
<span class="text">0%</span> <span class="percentage"></span>
</div>
<div class="info"></div>
<div class="btns">
<div id="filePicker2"></div>
<div class="uploadBtn">开始上传</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 引入上传控件JS -->
<script type="text/javascript"
src="${ctx }/resources/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript"
src="${ctx }/resources/webuploader/global.js"></script>
<script type="text/javascript"
src="${ctx }/resources/webuploader/webuploaderCHBG.js"></script>
<script src="${ctx}/resources/assets/global/plugins/bootstrap-sweetalert/sweetalert.min.js" type="text/javascript"></script>
<script src="${ctx}/resources/assets/pages/scripts/ui-sweetalert.min.js" type="text/javascript"></script>
</body>
<script type="text/javascript">
//上传数量
var fileNum = '15';
//生成UUID
var uuid = generateMixed(32);
function onLoadUpload() {
var $ = jQuery;
var origin;
var is_moveing = false;
var $wrap = $('#uploader');
var $queue = $('<ul class="filelist"></ul>').appendTo($wrap.find('.queueList'));
var $statusBar = $wrap.find('.statusBar');
var $info = $statusBar.find('.info');
var $upload = $wrap.find('.uploadBtn');
var $placeHolder = $wrap.find('.placeholder');
var $progress = $statusBar.find('.progress').hide();
var fileCount = 0;
var fileSize = 0;
var state = 'pedding';
var ratio = window.devicePixelRatio || 1;
var thumbnailWidth = 130 || 110;
thumbnailWidth *= ratio;
var thumbnailHeight = 130 || 110;
thumbnailHeight *= ratio;
var percentages = {};
var supportTransition = (function () {
var s = document.createElement('p').style,
r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s;
s = null;
return r;
})();
if (!WebUploader.Uploader.support()) {
swal("提示:"+ 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器',"浏览器异常","error");
throw new Error(
'WebUploader does not support the browser you are using.');
}
// 实例化
var uploader = WebUploader.create({
// 不压缩image
resize : false,
// swf文件路径
swf : '${ctx}/resources/webuploader/Uploader.swf',
// 文件接收服务端。
server : '${ctx}/files/webUpload',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick : {
id : '#picker',
label : '点击选择文件'
},
//传输参数
formData : {
batch : uuid
},
//指定Drag And Drop拖拽的容器，如果不指定，则不启动。
dnd : '#uploader .queueList',
//此功能为通过粘贴来添加截屏的图片
paste : document.body,
//去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.
duplicate : false,
// 只允许选择图片文件。
accept : {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
compress :false,
//验证单张文件的大小
fileSingleSizeLimit : 10 * 1024 * 1024, //10M
fileNumLimit : fileNum,
duplicate:true,
//图片压缩
compress:{
width: 1600,
height: 1600,
// 图片质量，只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大，则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节，如果图片大小小于此值，不会采用压缩。
compressSize: 0
},
//并发数为1
threads:1
});
// 添加“添加文件”的按钮，
uploader.addButton({
id : '#filePicker2',
label : '继续添加'
});
//图片拖动方法
function setDragEvent() {
$(this).on('drop', function (e) {
var $from = $(origin).parents('li');
var $to = $(e.target).parents('li');
var origin_pos = $from.position();
var target_pos = $to.position();
var from_sort = $from.attr('data-sort');
var to_sort = $to.attr('data-sort');
//图片移动效果
$from.addClass('move').animate(target_pos, "fast", function () {
$(this).removeClass('move');
}).attr('data-sort', to_sort);
$to.addClass('move').animate(origin_pos, 'fast', function () {
$(this).removeClass('move');
}).attr('data-sort', from_sort);
}).on('dragstart', function (e) {
if (is_moveing) {
return false;
}
is_moveing = true;
e.originalEvent.dataTransfer.effectAllowd = 'move';
origin = this;
}).on('dragover', function (e) {
if (e.preventDefault)
e.preventDefault();
is_moveing = false;
e.originalEvent.dataTransfer.dropEffect = 'move';
});
}
function addFile(file) {
var index = $queue.find('li').length;
//图片放的位置
var imgLeft = index * (thumbnailWidth + 10);
var imgTop = 0;
var wrapHeight = thumbnailHeight + 20;
var wrapWidth = $queue.width() + 20 + 10;
if (imgLeft >= wrapWidth) {
imgTop = parseInt(imgLeft / wrapWidth) * (thumbnailHeight + 10);
wrapHeight = imgTop + wrapHeight;
imgLeft = (index % (parseInt(wrapWidth / (thumbnailWidth + 10)) + 1)) * (thumbnailWidth + 10);
}
$queue.height(wrapHeight);
//图片拖动的前置生成
var $li = $('<li data-key="' + file.key + '" data-src="' + file.src + '" data-sort="' + index + '" draggable="true" id="' + file.id + '" style="position:absolute;margin:0;cursor:move;width:' + thumbnailWidth + 'px;height:' + thumbnailHeight + 'px;left:' + imgLeft + 'px;top:' + imgTop + 'px;">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap" style="width:' + thumbnailWidth + 'px;height:' + thumbnailHeight + 'px;"></p>' +
'<p class="progress"><span></span></p>' + '</li>'),
$btns = $(
'<div class="file-panel">'
+ '<span class="cancel">删除</span>'
+ '<span class="rotateRight">向右旋转</span>'
+ '<span class="rotateLeft">向左旋转</span></div>')
.appendTo($li), $prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $('<p class="error"></p>'),
showError = function (code) {
switch (code) {
case 'exceed_size':
text = '文本大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败';
break;
}
$info.text(text).appendTo($li);
};
if (file.src == "client") {
if (file.getStatus() == 'invalid') {
showError(file.statusText);
} else {
$wrap.text('预览中');
uploader.makeThumb(file, function (error, src) {
if (error) {
$wrap.text('不能预览');
return;
}
var img = $('<img draggable="true" src="' + src + '">');
img.bind('load', setDragEvent);
$wrap.empty().append(img);
}, thumbnailWidth, thumbnailHeight);
percentages[file.id] = [fileSize, 0];
file.rotation = 0;
};
file.on('statuschange', function (cur, prev) {
if (prev == 'progress') {
$progress.hide().width(0);
} else if (prev == 'queued') {
$li.off('mouseenter mouseleave');
$btns.remove();
}
if (cur == 'error' || cur == 'invalid') {
showError(file.statusText);
percentages[file.id][1] = 1;
} else if (cur == 'interrupt') {
showError('interrupt');
} else if (cur == 'queued') {
percentages[file.id][1] = 0;
} else if (cur == 'progress') {
$info.remove();
$progress.css('display', 'block');
} else if (cur == 'complete') {
$li.append('<span class="success"></span>');
}
$li.removeClass('state-' + prev).addClass('state-' + cur);
});
} else {
var img = $('<img draggable="true" src="' + file.path + '">');
img.bind('load', setDragEvent);
$wrap.empty().append(img);
}
$li.on('mouseenter', function () {
$btns.stop().animate({
height: 30
});
});
$li.on('mouseleave', function () {
$btns.stop().animate({
height: 0
})
});
$btns.on('click', 'span', function () {
var index = $(this).index(),
deg;
switch (index) {
case 0:
var allImgs = {};
var del_sort = parseInt($('#' + file.id).attr('data-sort'));
$queue.find('li').each(function (index, obj) {
if ($(obj).attr('data-sort') > del_sort) {
var sort = parseInt($(obj).attr('data-sort'));
var $prevObj = $("li[data-sort=" + (sort - 1) + "]");
if ($prevObj) {
allImgs[$(obj).attr('id')] = $prevObj.position();
}
}
});
for (var k in allImgs) {
var sort = parseInt($('#' + k).attr('data-sort'));
$('#' + k).attr('data-sort', sort - 1).css({
left: allImgs[k].left + 'px',
top: allImgs[k].top + 'px'
});
}
allImgs = null;
if (file.src == "client")
uploader.removeFile(file);
else {
$('#' + file.id).remove();
}
return;
case 1:
file.rotation += 90;
break;
case 2:
file.rotation -= 90;
break;
}
if (supportTransition) {
deb = 'rotate(' + file.rotation + 'deg)';
$wrap.css({
'-webkit-transform': deb,
'-mos-transform': deg,
'-o-transform': deg,
'transform': deg
});
} else {}
});
$li.appendTo($queue);
}
function removeFile(file) {
var $li = $('#' + file.id);
delete percentages[file.id];
updateTotalProgress();
$li.off().find('.file-panel').off().end().remove();
}
function updateTotalProgress() {
var loaded = 0,
total = 0,
spans = $progress.children(),
percent;
$.each(percentages, function (k, v) {
total += v[0];
loaded += v[0] * v[1];
});
percent = total ? loaded / total : 0;
spans.eq(0).text(Math.round(percent * 100) + '%');
spans.eq(1).css('width', Math.round(percent * 100) + '%');
updateStatus();
}
//上传的判断
function updateStatus() {
var text = '', stats;
if (state === 'ready') {
text = '选中' + fileCount + '份文件，共'
+ WebUploader.formatSize(fileSize) + '。';
} else if (state === 'confirm') {
stats = uploader.getStats();
if (stats.uploadFailNum) {
text = '已成功上传'
+ stats.successNum
+ '份文件，'
+ stats.uploadFailNum
+ '份文件上传失败，<a class="retry" href="#">重新上传</a>失败文件或<a class="ignore" href="#">忽略</a>'
console.log(WebUploader);
console.log(stats);
}
} else {
stats = uploader.getStats();
// console.log(stats);
//console.log(stats.successNum);
text = '共' + fileCount + '份文件（'
+ WebUploader.formatSize(fileSize) + '），已上传'
+ stats.successNum + '份';
if (stats.uploadFailNum) {
text += '，失败' + stats.uploadFailNum + '份';
} else {
if (stats.successNum != 0
&& stats.successNum == fileCount) {
//图片上传成功提示
window.parent.successAlert();
}
}
}
$info.html(text);
}
function setState(val) {
var file, stats;
if (val === state) {
return;
}
$upload.removeClass('state-' + state);
$upload.addClass('state-' + val);
state = val;
switch (state) {
case 'pedding':
$placeHolder.removeClass('element-invisible');
$queue.parent().removeClass('filled');
$queue.hide();
$statusBar.addClass('element-invisible');
uploader.refresh();
break;
case 'ready':
$placeHolder.addClass('element-invisible');
$('#filePicker2').removeClass('element-invisible');
$queue.parent().addClass('filled');
$queue.show();
$statusBar.removeClass('element-invisible');
uploader.refresh();
break;
case 'uploading':
$('#filePicker2').addClass('element-invisible');
$progress.show();
$upload.text('暂停上传');
break;
case 'paused':
$progress.show();
$upload.text('继续上传');
break;
case 'confirm':
$progress.hide();
$upload.text('开始上传').addClass('disabled');
stats = uploader.getStats();
if (stats.successNum && !stats.uploadFailNum) {
setState('finish');
return;
}
break;
case 'finish':
stats = uploader.getStats();
if (stats.successNum) {
$(".tbody-memos").empty();
$queue
.find('li')
.each(
function() {
$(".tbody-memos")
.append(
'<tr><td>'
+ $(this)
.find(
'.title')
.text()
+ '</td><td>'
+ '<input type="text" class="form-control" placeholder="备注信息" name="memos" ></td></tr>');
});
$("div[id='table-memo']").each(function() {
$(this).css("display", "block");
});
$("div[id='uploadButton']").each(function() {
$(this).css("display", "block");
});
} else {
// 没有成功的，重设
state = 'done';
location.reload();
}
break;
}
updateStatus();
}
function fileQueue(file) {
uploader.sort(function (obj1, obj2) {
return obj1.id > obj2.id ? -1 : 1;
});
file.src = file.src || "client";
fileCount++;
fileSize += file.size;
if (fileCount == 1) {
$placeHolder.addClass('element-invisible');
$statusBar.show();
}
addFile(file);
setState('ready');
updateTotalProgress();
}
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progess span');
$percent.css("width", percentage * 100 + '%');
updateTotalProgress();
});
uploader.on('fileQueued', fileQueue);
uploader.on('fileDequeued', function (file) {
fileCount--;
fileSize -= file.size;
if (!fileCount) {
setState('pedding');
}
removeFile(file);
updateTotalProgress();
});
uploader.on('uploadSuccess', function (file) {
$('#' + file.id).find('p.state').text('已上传');
});
uploader.on('uploadError', function (file) {
console.log(file.id + '上传出错');
});
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('p.state').fadeOut();
});
//所有的操作
uploader.on('all', function(type) {
var stats;
switch (type) {
case 'uploadFinished':
setState('confirm');//开始上传
break;
case 'startUpload':
setState('uploading');//暂停上传
break;
case 'stopUpload':
setState('paused');//继续上传
break;
}
});
uploader.on('uploadBeforeSend', function (block, data) {
data.sort = $('#' + data.id).attr('data-sort');
});
uploader.on("error", function (type) {
if (type == "Q_TYPE_DENIED") {
swal("请上传gif,jpg,jpeg,bmp,png格式文件","图片类型错误","error");
} else if (type == "F_EXCEED_SIZE") {
swal("单个文件大小不能超过10M","图片大小错误","error");
}else if (type == "Q_EXCEED_NUM_LIMIT"){
swal("图片总数不能超过" + fileNum + "张","图片数量错误","error");
} else {
swal("上传出错！请检查后重新上传！错误代码"+type,"错误","error");
}
});
function sortNumber(a, b){
return a - b;
}
$upload.on('click', function () {
//修改上传的顺序
uploader.sort(function (obj1, obj2) {
return sortNumber($('#' + obj1.id).attr('data-sort'),$('#' + obj2.id).attr('data-sort'));
});
if ($(this).hasClass('disabled')) {
return false;
}
if (state == 'ready') {
uploader.upload();
} else if (state == 'paused') {
uploader.upload();
} else if (state == 'uploading') {
uploader.stop();
}
});
$info.on('click', '.retry', function () {
uploader.retry();
});
//忽略
$info.on('click', '.ignore', function() {
$placeHolder.removeClass('element-invisible');
$queue.parent().removeClass('filled');
$queue.hide();
$statusBar.addClass('element-invisible');
uploader.refresh();
});
$upload.addClass('state-' + state);
updateTotalProgress();
reInitUploader = function() {
files = uploader.getFiles();
for (var i = 0; i < files.length; i++) {
uploader.removeFile(files[i]);
}
$upload.text('开始上传').removeClass('disabled');
};
}
var _paneHtml = '';
function myUpload() {
$("#panel").html(_paneHtml);
showMP();
onLoadUpload();
}
function showMP() {
$("#mark").show();
$("#panel").show();
}
$(function() {
_paneHtml = $("#panel").html();
myUpload();
});
function generateMixed(n) {
var chars = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
var res = "";
for(var i = 0; i < n ; i ++) {
var id = Math.ceil(Math.random()*35);
res += chars[id];
}
return res;
}
</script>
</html>
4. 说明
- 添加图片生成的时候需要加上
var $li = $('<li data-key="' + file.key + '" data-src="' + file.src + '" data-sort="' + index + '" draggable="true" id="' + file.id + '" style="position:absolute;margin:0;cursor:move;width:' + thumbnailWidth + 'px;height:' + thumbnailHeight + 'px;left:' + imgLeft + 'px;top:' + imgTop + 'px;">' +
'<p class="title">' + file.name + '</p>' +
'<p class="imgWrap" style="width:' + thumbnailWidth + 'px;height:' + thumbnailHeight + 'px;"></p>' +
'<p class="progress"><span></span></p>' + '</li>'),
- 添加文件的时候加上
var img = $('<img draggable="true" src="' + src + '">');
img.bind('load', setDragEvent);
$wrap.empty().append(img);
- 增加方法setDragEvent
- 前端显示的图片调整好后,需要调整上传文件的顺序跟显示的一致
function sortNumber(a, b){
return a - b;
}
uploader.sort(function (obj1, obj2) {
//这里的data-sort代表了上传图片原来的顺序,需要重新排序
return sortNumber($('#' + obj1.id).attr('data-sort'),$('#' + obj2.id).attr('data-sort'));
});
5.需要把上传并发数改为1
threads:1