webuploader配置

作圖片上傳的時候用webuploader是個不錯的選擇，他能夠經過簡單的配置實現圖片的上傳預覽和處理。

 1 <!--引入CSS-->
 2 <link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css">
 3 
 4 <!--引入JS-->
 5 <script type="text/javascript" src="webuploader文件夾/webuploader.js"></script>
 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:true
33                 },
34                  accept:{
35                     title: 'image',
36                     extensions: 'jpeg,jpg,png',
37                     mimeTypes: 'image/jpg,image/jpeg,image/png'
38                 },
39                 auto:false
40             });
41             // 當有文件添加進來的時候
42             uploader.on( 'fileQueued', function( file ) {
43                 var $li = $('<div id="' + file.id + '" class="item">' +
44                         '<div><img id=\'showImg\' style="width:320px;height:170px;border: 5px solid #ddd;"></div>' 
45                          +'</div>'+ file.name),
46                 $img = $li.find('img');
47                 $("#thelist").html( $li );
48                 // 建立縮略圖
49                 // 若是爲非圖片文件，能夠不用調用此方法。
50                 // thumbnailWidth x thumbnailHeight 爲 1 x 100
51                 uploader.makeThumb( file, function( error, src ) {
52                     if ( error ) {
53                         $img.replaceWith('<span>不能預覽</span>');
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 </script>

這是作單張圖片上傳的webuploader配置，