基于百度的webuploder做上传功能

1.首先下载webuploder地址如下：

    地址：http://fex.baidu.com/webuploader/download.html

2.然后在引用资源文件

1.  <link href="${XXX}/bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>  
2.  <link href="${XXX}/webupload/css/webuploader.css" type="text/css" rel="stylesheet"/>  
3.  <script type="text/javascript" src="${XXX}/jquery/jquery-1.9.1.min.js"></script>  
4.  <script type="text/javascript" src="${XXX}/webupload/webuploader.min.js"></script>  
5.  <script type="text/javascript" src="${XXX}/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

3.写一个css文件和js文件来初始化插件和样式（注：我都是从百度的demo中ba下来的地址：点击打开链接）

#container {    color: #838383;    font-size: 12px;}#uploader .queueList {    margin: 20px 0;        border: 3px dashed #e6e6e6;}#uploader .queueList.filled {    padding: 17px;    margin: 0;    border: 3px dashed transparent;}#uploader .queueList.webuploader-dnd-over {    border: 3px dashed #999999;}#uploader p {margin: 0;}.element-invisible {    position: absolute !important;    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */    clip: rect(1px,1px,1px,1px);}#uploader .placeholder {    min-height: 90px;    padding-top: 60px;    text-align: center;    background: url(../images/image.png) center 93px no-repeat;    color: #cccccc;    font-size: 18px;    position: relative;}#uploader .placeholder .webuploader-pick {    font-size: 18px;    background: #00b7ee;    border-radius: 3px;    line-height: 44px;    padding: 0 30px;    *width: 120px;    color: #fff;    display: inline-block;    margin: 0 auto 20px auto;    cursor: pointer;    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}#uploader .placeholder .webuploader-pick-hover {    background: #00a2d4;}#uploader .placeholder .flashTip {    color: #666666;    font-size: 12px;    position: absolute;    width: 100%;    text-align: center;    bottom: 20px;}#uploader .placeholder .flashTip a {    color: #0785d1;    text-decoration: none;}#uploader .placeholder .flashTip a:hover {    text-decoration: underline;}#uploader .filelist {    list-style: none;    margin: 0;    padding: 0;}#uploader .filelist:after {    content: '';    display: block;    width: 0;    height: 0;    overflow: hidden;    clear: both;}#uploader .filelist li {    width: 110px;    height: 110px;    background: url(../images/bg.png) no-repeat;    text-align: center;    margin: 0 8px 20px 0;    position: relative;    display: inline;    float: left;    overflow: hidden;    font-size: 12px;}#uploader .filelist li p.log {    position: relative;    top: -45px;}#uploader .filelist li p.title {    position: absolute;    top: 0;    left: 0;    width: 100%;    overflow: hidden;    white-space: nowrap;    text-overflow : ellipsis;    top: 5px;    text-indent: 5px;

jQuery(function() {    var $ = jQuery,    // just in case. Make sure it's not an other libaray.        $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,        // 优化retina, 在retina下这个值是2        ratio = window.devicePixelRatio || 1,        // 缩略图大小        thumbnailWidth = 110 * ratio,        thumbnailHeight = 110 * ratio,        // 可能有pedding, ready, uploading, confirm, done.        state = 'pedding',        // 所有文件的进度信息，key为file id        percentages = {},        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;        })(),        // WebUploader实例        uploader;    if ( !WebUploader.Uploader.support() ) {        alert( 'Web Uploader 不支持您的浏览器！如果你使用的是IE浏览器，请尝试升级 flash 播放器');        throw new Error( 'WebUploader does not support the browser you are using.' );    }    // 实例化    uploader = WebUploader.create({        pick: {            id: '#filePicker',            label: '点击选择图片'        },        dnd: '#uploader .queueList',        paste: document.body,        accept: {            title: 'Images',            extensions: 'gif,jpg,jpeg,bmp,png',            mimeTypes: 'image/*'        },        // swf文件路径       // swf: BASE_URL + '/js/Uploader.swf',        disableGlobalDnd: true,        chunked: true,       // server: 'http://webuploader.duapp.com/server/fileupload.php',        server: '/EstateBusiness/admin/news/imgUpload',        fileNumLimit: 300,        fileSizeLimit: 5 * 1024 * 1024,    // 200 M        fileSingleSizeLimit: 1 * 1024 * 1024    // 50 M    });    // 添加“添加文件”的按钮，    uploader.addButton({        id: '#filePicker2',        label: '继续添加'    });    // 当有文件添加进来时执行，负责view的创建    function addFile( file ) {        var $li = $( '<li id="' + file.id + '">' +                '<p class="title">' + file.name + '</p>' +                '<p class="imgWrap"></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.getStatus() === 'invalid' ) {            showError( file.statusText );        } else {            // @todo lazyload            $wrap.text( '预览中' );            uploader.makeThumb( file, function( error, src ) {                if ( error ) {                    $wrap.text( '不能预览' );                    return;                }                var img = $('<img src="'+src+'">');                $wrap.empty().append( img );            }, thumbnailWidth, thumbnailHeight );            percentages[ file.id ] = [ file.size, 0 ];            file.rotation = 0;        }        file.on('uploadProgress', function( file, percentage  ) {        debugger;            if ( prev === 'progress' ) {                $prgress.hide().width(0);            } else if ( prev === 'queued' ) {                $li.off( 'mouseenter mouseleave' );                $btns.remove();            }            // 成功            if ( cur === 'error' || cur === 'invalid' ) {                console.log( file.statusText );                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();                $prgress.css('display', 'block');            } else if ( cur === 'complete' ) {                $li.append( '<span class="success"></span>' );            }            $li.removeClass( 'state-' + prev ).addClass( 'state-' + cur );        });        $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:                    uploader.removeFile( file );                    return;                case 1:                    file.rotation += 90;                    break;                case 2:                    file.rotation -= 90;                    break;            }            if ( supportTransition ) {                deg = 'rotate(' + file.rotation + 'deg)';                $wrap.css({                    '-webkit-transform': deg,                    '-mos-transform': deg,                    '-o-transform': deg,                    'transform': deg                });            } else {                $wrap.css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');                // use jquery animate to rotation                // $({                //     rotation: rotation                // }).animate({                //     rotation: file.rotation                // }, {                //     easing: 'linear',                //     step: function( now ) {                //         now = now * Math.PI / 180;                //         var cos = Math.cos( now ),                //             sin = Math.sin( now );                //         $wrap.css( 'filter', "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + ",M12=" + (-sin) + ",M21=" + sin + ",M22=" + cos + ",SizingMethod='auto expand')");                //     }                // });            }        });        $li.appendTo( $queue );    }    // 负责view的销毁    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() {    debugger;        var text = '', stats;        if ( state === 'ready' ) {            text = '选中' + fileCount + '张图片，共' +                    WebUploader.formatSize( fileSize ) + '。';        } else if ( state === 'confirm' ) {            stats = uploader.getStats();            if ( stats.uploadFailNum ) {                text = '已成功上传' + stats.successNum+ '张照片至XX相册，'+                    stats.uploadFailNum + '张照片上传失败，<a class="retry" href="#">重新上传</a>失败图片或<a class="ignore" href="#">忽略</a>'            }        } else {            stats = uploader.getStats();            text = '共' + fileCount + '张（' +                    WebUploader.formatSize( fileSize )  +                    '），已上传' + stats.successNum + '张';            if ( stats.uploadFailNum ) {                text += '，失败' + stats.uploadFailNum + '张';            }        }        $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 ) {                    alert( '上传成功' );                } else {                    // 没有成功的图片，重设                    state = 'done';                    location.reload();                }                break;        }        updateStatus();    }    uploader.onUploadProgress = function( file, percentage ) {        var $li = $('#'+file.id),            $percent = $li.find('.progress span');        $percent.css( 'width', percentage * 100 + '%' );        percentages[ file.id ][ 1 ] = percentage;        updateTotalProgress();    };    uploader.onFileQueued = function( file ) {        fileCount++;        fileSize += file.size;        if ( fileCount === 1 ) {            $placeHolder.addClass( 'element-invisible' );            $statusBar.show();        }        addFile( file );        setState( 'ready' );        updateTotalProgress();    };    uploader.onFileDequeued = function( file ) {        fileCount--;        fileSize -= file.size;        if ( !fileCount ) {            setState( 'pedding' );        }        removeFile( file );        updateTotalProgress();    };    uploader.on( 'all', function( type ) {    debugger;        var stats;        switch( type ) {            case 'uploadFinished':                setState( 'confirm' );                break;            case 'startUpload':                setState( 'uploading' );                break;            case 'stopUpload':                setState( 'paused' );                break;        }    });    uploader.onError = function( code ) {        alert( 'Eroor: ' + code );    };    $upload.on('click', function() {        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() {        alert( 'todo' );    } );    $upload.addClass( 'state-' + state );    updateTotalProgress();});

text-align: left;}#uploader .filelist li p.progress { position: absolute; width: 100%; bottom: 0; left: 0; height: 8px; overflow: hidden; z-index: 50; margin: 0; border-radius: 0; background: none; -webkit-box-shadow: 0 0 0;}#uploader .filelist li p.progress span { display: none; overflow: hidden; width: 0; height: 100%; background: #1483d8 url(../images/progress.png) repeat-x; -webit-transition: width 200ms linear; -moz-transition: width 200ms linear; -o-transition: width 200ms linear; -ms-transition: width 200ms linear; transition: width 200ms linear; -webkit-animation: progressmove 2s linear infinite; -moz-animation: progressmove 2s linear infinite; -o-animation: progressmove 2s linear infinite; -ms-animation: progressmove 2s linear infinite; animation: progressmove 2s linear infinite; -webkit-transform: translateZ(0);}@-webkit-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; }}@-moz-keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; }}@keyframes progressmove { 0% { background-position: 0 0; } 100% { background-position: 17px 0; }}#uploader .filelist li p.imgWrap { position: relative; z-index: 2; line-height: 110px; vertical-align: middle; overflow: hidden; width: 110px; height: 110px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webit-transition: 200ms ease-out; -moz-transition: 200ms ease-out; -o-transition: 200ms ease-out; -ms-transition: 200ms ease-out; transition: 200ms ease-out;}#uploader .filelist li img { width: 100%;}#uploader .filelist li p.error { background: #f43838; color: #fff; position: absolute; bottom: 0; left: 0; height: 28px; line-height: 28px; width: 100%; z-index: 100;}#uploader .filelist li .success { display: block; position: absolute; left: 0; bottom: 0; height: 40px; width: 100%; z-index: 200; background: url(../images/success.png) no-repeat right bottom;}#uploader .filelist div.file-panel { position: absolute; height: 0; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#80000000', endColorstr='#80000000')\0; background: rgba( 0, 0, 0, 0.5 ); width: 100%; top: 0; left: 0; overflow: hidden; z-index: 300;}#uploader .filelist div.file-panel span { width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url(../images/icons.png) no-repeat; margin: 5px 1px 1px; cursor: pointer;}#uploader .filelist div.file-panel span.rotateLeft { background-position: 0 -24px;}#uploader .filelist div.file-panel span.rotateLeft:hover { background-position: 0 0;}#uploader .filelist div.file-panel span.rotateRight { background-position: -24px -24px;}#uploader .filelist div.file-panel span.rotateRight:hover { background-position: -24px 0;}#uploader .filelist div.file-panel span.cancel { background-position: -48px -24px;}#uploader .filelist div.file-panel span.cancel:hover { background-position: -48px 0;}#uploader .statusBar { height: 63px; border-top: 1px solid #dadada; padding: 0 20px; line-height: 63px; vertical-align: middle; position: relative;}#uploader .statusBar .progress { border: 1px solid #1483d8; width: 198px; background: #fff; height: 18px; position: relative; display: inline-block; text-align: center; line-height: 20px; color: #6dbfff; position: relative; margin: 20px 200px 0 0;}#uploader .statusBar .progress span.percentage { width: 0; height: 100%; left: 0; top: 0; background: #1483d8; position: absolute;}#uploader .statusBar .progress span.text { position: relative; z-index: 10;}#uploader .statusBar .info {line-height:30px;margin: 2px 200px; display: inline-block; font-size: 14px; color: #666666;}#uploader .statusBar .btns { position: absolute; top: 10px; right: 20px; line-height: 40px;}#filePicker2 { display: inline-block; float: left;}#uploader .statusBar .btns .webuploader-pick,#uploader .statusBar .btns .uploadBtn,#uploader .statusBar .btns .uploadBtn.state-uploading,#uploader .statusBar .btns .uploadBtn.state-paused { background: #ffffff; border: 1px solid #cfcfcf; color: #565656; padding: 0 18px; display: inline-block; border-radius: 3px; margin-left: 10px; cursor: pointer; font-size: 14px; float: left;}#uploader .statusBar .btns .webuploader-pick-hover,#uploader .statusBar .btns .uploadBtn:hover,#uploader .statusBar .btns .uploadBtn.state-uploading:hover,#uploader .statusBar .btns .uploadBtn.state-paused:hover { background: #f0f0f0;}#uploader .statusBar .btns .uploadBtn { background: #00b7ee; color: #fff; border-color: transparent;}#uploader .statusBar .btns .uploadBtn:hover { background: #00a2d4;}#uploader .statusBar .btns .uploadBtn.disabled { pointer-events: none; opacity: 0.6;}
3.html代码
<input id="xgcl" name="xgcl" type='hidden' value="${cqCqrxx.xgcl}"/><div id="uploader" class="wu-example">    <div class="queueList">        <div id="dndArea" class="placeholder">            <div id="filePicker"></div>        </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>

4.服务端代码，这里服务端用的springmvc框架，（其实服务端就是正常的文件上传的代码就可以了）
public static String fileUpload(HttpServletRequest request,String folderName){int counter = 0;String fileNameALL = "";String fileName = "";System.out.println("收到文件!");MultipartHttpServletRequest Murequest = (MultipartHttpServletRequest) request;Map<String, MultipartFile> files = Murequest.getFileMap();// 得到文件map对象String upaloadUrl = request.getSession().getServletContext().getRealPath("/") + folderName+"/";// 得到当前工程路径拼接上文件名File dir = new File(upaloadUrl);System.out.println(upaloadUrl);if (!dir.exists())// 目录不存在则创建dir.mkdirs();for (MultipartFile file : files.values()) {counter++;fileName = file.getOriginalFilename();File tagetFile = new File(upaloadUrl + fileName);// 创建文件对象if (counter == 1) {fileNameALL = fileName;} else {fileNameALL = fileNameALL + "," + fileName;}if (!tagetFile.exists()) {// 文件名不存在 则新建文件，并将文件复制到新建文件中try {tagetFile.createNewFile();} catch (IOException e) {e.printStackTrace();}try {file.transferTo(tagetFile);} catch (IllegalStateException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}}}System.out.println("接收完毕");System.out.println(fileNameALL);return fileNameALL;// return response;}
效果图：


                                             
        0        0           
	
				
	
					   
基于百度的webuploder做上传功能
	  	   
百度编辑器单独作为图片上传文件上传功能，百度编辑器做缩略图
	  	   
图片上传功能之~百度编辑器单独作为图片上传文件上传功能，百度编辑器做缩略图
	  	   
基于百度地图的地理位置选择功能
	  	   
Ａｎｄｒｏｉｄ基于百度ＡＰＩ的定位功能
	  	   
基于thinkphp的uploadify上传图功能
	  	   
基于jsp+struts2的图片上传功能
	  	   
基于ssh框架的文件上传功能
	  	   
百度UEditor里面截取出来的图片上传功能
	  	   
百度UEditor调用单图片上传功能的解决方法
	  	   
Java实现基于百度地图的坐标拾取功能
	  	   
基于百度地图的地理位置选择功能 （搜索）
	  	   
Android 基于百度语音的语音交互功能
	  	   
基于百度地图SDK集成的一些功能
	  	   
用java做c/s架构的文件上传功能
	  	   
商城开发之商城上传商品-webuploder上传商品图片篇
	  	   
基于struts 的FormFile实现文件的上传功能
	  	   
基于TCP的客户端，服务器端上传文本文件的功能Demo
	     		  
	  	   
application/json 四种常见的 POST 提交数据方式
	  	   
创建认证授权的docker私有仓库
	  	   
Tpcc-MySQL测试详解
	  	   
【iOS开发】jenkins mac各个版本pkg包下载地址大全
	  	   
Python之网络爬虫完全教程
	  	   
基于百度的webuploder做上传功能
	  	   
SQL Server 游标的使用
	  	   
用echarts画桑基图的简单示例
	  	   
win7+tensorflow+python3.5+gpu
	  	   
Easy 13  Length of Last Word（58）
	  	   
HTTP 协议详解
	  	   
R文件找不到，报红问题
	  	   
Android第三方数据库框架litePal使用
	  	   
完整java开发中JDBC连接数据库代码和步骤