<!--引入CSS-->

 <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

 <!--引入JS-->

 <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
 $(function() {

              var $list=$("#thelist");

             var $btn =$("#commit_btu");   //开始上传按钮

             var thumbnailWidth = 1;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档

             var thumbnailHeight = 1;

             var uploader = WebUploader.create({

                 // swf文件路径

                 swf:'plugins/webuploader/Uploader.swf',

                 // 文件接收服务端。

                 server: '${pageContext.request.contextPath }/model/addPath.do',

                 // 选择文件的按钮。可选。

                 // 内部根据当前运行是创建，可能是input元素，也可能是flash.

                 pick: '#picker', //上传按钮监听（picker是上传按钮的id）

                 duplicate :true,//允许重复上传

                 method: 'POST',

                 fileNumLimit:1, //限制上传文件队列的大小，超出范围则不允许添加

                 // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！

                  compress:{

                     width:320,

                     height:170,

                     quality:70,

                     allowMagnify:true,

                     crop:true

                 },

                  accept:{

                     title: 'image',

                     extensions: 'jpeg,jpg,png',

                     mimeTypes: 'image/jpg,image/jpeg,image/png'

                 },

                 auto:false

             });

             // 当有文件添加进来的时候

             uploader.on( 'fileQueued', function( file ) {

                 var $li = $('<div id="' + file.id + '" class="item">' +

                         '<div><img id=\'showImg\' style="width:320px;height:170px;border: 5px solid #ddd;"></div>'

                          +'</div>'+ file.name),

                 $img = $li.find('img');

                 $("#thelist").html( $li );

                 // 创建缩略图

                 // 如果为非图片文件，可以不用调用此方法。

                 // thumbnailWidth x thumbnailHeight 为 1 x 100

                 uploader.makeThumb( file, function( error, src ) {

                     if ( error ) {

                         $img.replaceWith('<span>不能预览</span>');

                         return;

                     }

                     $img.attr( 'src', src );

                 }, thumbnailWidth, thumbnailHeight );

             });

             //手动上传，

             $btn.on('click', function() {

                 var name = $("#name").val();//广告名称

                 var url = $("#url").val(); //外链接

                 if(name=='' || url==''){

                     alert("内容不能为空");

                 }else if(uploader.getFiles().length==0){

                     alert("还未选择上传的图片");

                 }else{

                     uploader.upload();//开始上传图片

                 }

             });

             //选择图片完成前，每次选择图片加入队列的时候重置队列，保证队列中只有一张图片，

             uploader.on('beforeFileQueued',function(){

                 uploader.reset();//为了保证每次队列只上传一张图片，并且不让队列堵塞，所以每次重新选择一张图片之前都会对文件队列尽心一次重置，保证队列为空

             });

             //上传成功

             uploader.on( 'uploadSuccess', function( file,response ) {

                 $( '#'+file.id ).find('p.state').text('已上传');

                 $("#thelist").find("img").attr("src",response._raw);

                 save_img();//图片上传成功后提交数据并保存到数据库（这是自定义方法）

             });

             //上传失败

             uploader.on( 'uploadError', function( file ) {

                 $( '#'+file.id ).find('p.state').text('上传出错,提交失败');

             });

 });

 </script>