做图片上传的时候用webuploader是个不错的选择，他可以通过简单的配置实现图片的上传预览和处理。

1 
      2 
      3  4 
      5   6 $(function() { 7  8             var $list=$("#thelist");      9             var $btn =$("#commit_btu");   //开始上传按钮10             var thumbnailWidth = 1;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档  11             var thumbnailHeight = 1;  12             var uploader = WebUploader.create({13                 // swf文件路径14                 swf:'plugins/webuploader/Uploader.swf',15 16                 // 文件接收服务端。17                 server: '${pageContext.request.contextPath }/model/addPath.do',18 19                 // 选择文件的按钮。可选。20                 // 内部根据当前运行是创建，可能是input元素，也可能是flash.21                 pick: '#picker', //上传按钮监听（picker是上传按钮的id）22                 duplicate :true,//允许重复上传23                 method: 'POST',24                 fileNumLimit:1, //限制上传文件队列的大小，超出范围则不允许添加25                 // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！26 27                 compress:{28                     width:320,29                     height:170,30                     quality:70,31                     allowMagnify:true,32                     crop:true33                 },34                  accept:{35                     title: 'image',36                     extensions: 'jpeg,jpg,png',37                     mimeTypes: 'image/jpg,image/jpeg,image/png'38                 },39                 auto:false40             });41             // 当有文件添加进来的时候42             uploader.on( 'fileQueued', function( file ) {43                 var $li = $('
     
      ' +44                         '
      
       
      
' 45                          +'
     
'+ file.name),46                 $img = $li.find('img');47                 $("#thelist").html( $li );48                 // 创建缩略图49                 // 如果为非图片文件，可以不用调用此方法。50                 // thumbnailWidth x thumbnailHeight 为 1 x 10051                 uploader.makeThumb( file, function( error, src ) {52                     if ( error ) {53                         $img.replaceWith('不能预览');54                         return;55                     }56                     $img.attr( 'src', src );57                 }, thumbnailWidth, thumbnailHeight );58             });59             //手动上传，60             $btn.on('click', function() {61                 var name = $("#name").val();//广告名称62                 var url = $("#url").val(); //外链接63                 if(name=='' || url==''){64                     alert("内容不能为空");65                 }else if(uploader.getFiles().length==0){66                     alert("还未选择上传的图片");67                 }else{68                     uploader.upload();//开始上传图片69                 }70             });71             //选择图片完成前，每次选择图片加入队列的时候重置队列，保证队列中只有一张图片，72             uploader.on('beforeFileQueued',function(){73                 uploader.reset();//为了保证每次队列只上传一张图片，并且不让队列堵塞，所以每次重新选择一张图片之前都会对文件队列尽心一次重置，保证队列为空74             });75             //上传成功76             uploader.on( 'uploadSuccess', function( file,response ) {77                 $( '#'+file.id ).find('p.state').text('已上传');78                 $("#thelist").find("img").attr("src",response._raw);79                 save_img();//图片上传成功后提交数据并保存到数据库（这是自定义方法）80             });81             //上传失败    82             uploader.on( 'uploadError', function( file ) {83                 $( '#'+file.id ).find('p.state').text('上传出错,提交失败');84             });85 });86 

这是做单张图片上传的webuploader配置，