项目:status2 spring hibernate
最近写了个模块,人员档案库,由于客户要求要实现多文件上传,所以苦逼的又要学习新的知识了,多文件上传已经实现了,所以在这里做个笔记。
1,首先到官网下载js,css,引入项目
<link rel="stylesheet" type="text/css" href="/js/webuploader/css/webuploader.css">
<script type="text/javascript" src="/js/webuploader/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/webuploader/js/webuploader.min.js"></script>
jsp页面:
<script type="text/javascript" src="${pageContext.request.contextPath}/ctcst/archives/upload.js"></script>
<div id="wrapper">
<div id="container">
<!--头部,相册选择和格式选择-->
<div id="uploader">
<div class="queueList">
<div id="dndArea" class="placeholder">
<div id="filePicker"></div>
<p>或将文件拖到这里,单个文件大小不超过2M,单次上传文件总大小不超过20M</p>
</div>
</div>
<div class="statusBar" style="display:none;">
<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>
下面是js:
(function( $ ){
// 当domReady的时候开始初始化
$(function() {
var $wrap = $('#uploader'),
// 图片容器
$queue = $( '<ul class="filelist"></ul>' )
.appendTo( $wrap.find( '.queueList' ) ),
// 状态栏,包括进度和控制按钮
$statusBar = $wrap.find( '.statusBar' ),
// 文件总体选择信息。
$info = $statusBar.find( '.info' ),
// 上传按钮
$upload = $wrap.find( '.uploadBtn' ),
// 没选择文件之前的内容。
$placeHolder = $wrap.find( '.placeholder' ),
$progress = $statusBar.find( '.progress' ).hide(),
// 添加的文件数量
fileCount = 0,
// 添加的文件总大小
fileSize = 0,
// 所有文件的进度信息,key为file id
percentages = {},
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker',
label: '点击选择文件',
name:"multiFile"
},
formData: {
//这里可以向后台传自定义的参数比如 key:value
},
dnd: '#dndArea',
paste: '#uploader',
swf: '../../js/webuploader/Uploader.swf',//引用Uploader.swf,去官网下载
fileVal:'multiFile',
chunked: false, // 是否分片上传
chunkSize: 512 * 1024,
server: 'http://localhost:8080/ctcst/archives_uploadInformation.action', //提交到服务器
//规定文件上传的格式
accept: {
title: 'file',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候,把图片打开。
disableGlobalDnd: true,
fileNumLimit: 10,
fileSizeLimit: 20 * 1024 * 1024, // 20 M
fileSingleSizeLimit: 2 * 1024 * 1024 // 2 M
});
// 拖拽时不接受 js, txt 文件。
uploader.on( 'dndAccept', function( items ) {
var denied = false,
len = items.length,
i = 0,
// 修改js类型
unAllowed = 'text/plain;application/javascript ';
for ( ; i < len; i++ ) {
// 如果在列表里面
if ( ~unAllowed.indexOf( items[ i ].type ) ) {
denied = true;
break;
}
}
return !denied;
});
// 添加“添加文件”的按钮,
uploader.addButton({
id: '#filePicker2',
label: '继续添加'
});
uploade