webuploader+springMvc+JSP 多图上传实现

<span style="font-family: Arial, Helvetica, sans-serif;"><div class="floor-popAd clearfix"></span>

<span class="span-popLeft"><span class="s-red">*</span>图片：</span><div class="fl"><div class="s-lightGray posra clearfix"><div id="filePicker" class="fl">本地上传</div><p class="fl" style="line-height:30px;">图片支持JPG，GIF格式，不超过2M</p></div><div class=" clearfix uploader-list"  id="fileList"></div></div></div>

<pre name="code" class="javascript"> var $list = $("#fileList");        // 初始化Web Uploader        var uploader = WebUploader.create({           // 设置文件上传域的name            fileVal:"fileupload",        // 不压缩image            resize: false,            // 选完文件后，是否自动上传。            auto: true,            //验证文件总数量, 超出则不允许加入队列            fileNumLimit:3,                        //验证文件总大小是否超出限制, 超出则不允许加入队列。            //fileSizeLimit:1024,                         //验证单个文件大小是否超出限制, 超出则不允许加入队列。           // fileSingleSizeLimit :1024,                        // swf文件路径            swf: '${ctx}/cy/js/lib/Uploader.swf',            // 文件接收服务端。            server: '${ctx}/advert/aptituImgUpload.html',            // 选择文件的按钮。可选。            // 内部根据当前运行是创建，可能是input元素，也可能是flash.            pick: '#filePicker',            // 只允许选择图片文件。            accept: {                title: 'Images',                extensions: 'gif,jpg,jpeg,bmp,png',                mimeTypes: 'image/*'            }        });        // 当有文件添加进来的时候        uploader.on( 'fileQueued', function( file ) {            var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'+'<input type="hidden" name="adImageUrl" id="adImageUrl' + file.id + '"/>' +'<img>' +'<div class="info">' + file.name + '</div>' +'<div class="remove-this">×</div>' +'</div>');            var $img = $li.find('img');            // $list为容器jQuery实例            $list.append( $li );            // 创建缩略图            // 如果为非图片文件，可以不用调用此方法。            // thumbnailWidth x thumbnailHeight 为 100 x 100            uploader.makeThumb( file, function( error, src ) {                if ( error ) {                    $img.replaceWith('<span>不能预览</span>');                    return;                }                $img.attr( 'src', src );            }, 100, 100 );            // 删除图片            $list.off("click.removeFile");            $list.on("click.removeFile",'.remove-this',function(ev){                ev.preventDefault();                uploader.removeFile(file);                $(this).parent().remove();            });        });        // 文件上传过程中创建进度条实时显示。        uploader.on( 'uploadProgress', function( file, percentage ) {            var $li = $( '#'+file.id ),                $percent = $li.find('.progress span');            // 避免重复创建            if ( !$percent.length ) {                $percent = $('<p class="progress"><span></span></p>')                        .appendTo( $li )                        .find('span');            }            $percent.css( 'width', percentage * 100 + '%' );        });        // 文件上传成功，给item添加成功class, 用样式标记上传成功。        uploader.on( 'uploadSuccess', function( file,obj ) {            $( '#'+file.id ).addClass('upload-state-done');            $( '#'+file.id ).append();            if(obj.code==1){        $("#adImageUrl"+file.id).val(obj.msg);//保存服务端返回图片地址        }        });                //当所有文件上传结束时触发。 根据文本框ID删除父级容器。        uploader.on( 'uploadFinished', function( file ) {         var m = document.getElementsByName("adImageUrl");              if(m.length > 3){             var obj = m[3];              $( '#'+obj.id ).parent().remove();             }        });                // 文件上传失败，显示上传出错。        uploader.on( 'uploadError', function( file ) {            var $li = $( '#'+file.id ),                $error = $li.find('div.error');            // 避免重复创建            if ( !$error.length ) {                $error = $('<div class="error"></div>').appendTo( $li );            }            $error.text('上传失败');        });        // 完成上传完了，成功或者失败，先删除进度条。        uploader.on( 'uploadComplete', function( file ) {            $( '#'+file.id ).find('.progress').remove();        });                //执行删除方法        $list.on("click", ".remove-this",function(){            $(this).parent().remove();        });/** * 初始化图片 */function initImageView(obj){var str=''; for(var i=0;i<obj.length;i++){str += '<div id="previewImage_' + i + '" class="file-item thumbnail">'+'<input type="hidden" name="adImageUrl" value='+ obj[i] +' id="adImageUrl' + i + '"/>' +'<img src="http://qa-pic.xebest.com'+obj[i]+'" width="100" height="100">' +'<div class="info"></div>' +'<div class="remove-this">×</div>' +'</div>';}$list.html( str ); // $list为容器jQuery实例}/** * 弹出对话框方法 * @param hid * @param ad */function myMask() { var _adImageUrl = $(obj).attr("adImageUrl");//图片地址 var arr =  _adImageUrl.split(","); if(arr.length>0 && arr[0]!=""){ initImageView(arr);//初始化图片 }}