上传笔记【一】webUploader 多文件上传并保存数据库

项目：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