SpringMVC上傳圖片總結（2）--- 使用百度webuploader上傳組件進行上傳圖片

SpringMVC上傳圖片總結（2）--- 使用百度webuploader上傳組件進行上傳圖片

 

在上一篇文章中，咱們介紹了《 SpringMVC上傳圖片的常規上傳方法 》。本文接着第一篇，將繼續介紹SpringMVC的上傳圖片，其中在頁面前端利用百度的開源組件WebUploader來進行上傳圖片，後臺繼續用SpringMVC來接收處理上傳的圖片。

百度開源WebUploader的相關資源：

官網地址：http://fex.baidu.com/webuploader/

快速入門文檔：http://fex.baidu.com/webuploader/getting-started.html

詳細API文檔：http://fex.baidu.com/webuploader/doc/

 

百度上傳組件初始化時，組件默認會生成一個隱藏的input標籤，name屬性值爲「file」，且encType="multipart/form-data"。

後臺接收處理圖片的controller代碼，按第一篇的《 SpringMVC上傳圖片常規上傳方法》的springmvc處理方法接收文件便可。

/**

 

 * ======jsp中的代碼部分=========

 

 */

 

<!-- webuploader.js -->

 

<script type="text/javascript" src="${basePath }/scripts/webuploader/webuploader.js"> </script>

 

<!-- webuploader.css -->

 

<link rel="stylesheet" type="text/css" href="${basePath }/scripts/webuploader/webuploader.css">

 

<script type="text/javascript" src="${basePath }/scripts/cms/mywebuploader.js"></script>

 

<!--dom結構部分-->

 

   <div id="uploader-demo" >

 

       <!--用來存放item，圖片列表fileList-->

 

       <div id="fileList" class="uploader-list"></div>

 

       <div id="filePicker" >選擇圖片</div>

 

   </div>

 

 <!-- <input type="button" id="btn" value="開始上傳"> -->

 

=========================js文件，mywebuploader.js=========================

$(function() {

 

    var $ = jQuery,

 

  // 展現圖片列表的容器

 

    $list = $('#fileList'),

 

    // 優化retina, 在retina下這個值是2

 

    ratio = window.devicePixelRatio || 1,

 

    // 縮略圖大小，像素*像素

 

    thumbnailWidth = 100 * ratio,

 

    thumbnailHeight = 100 * ratio,

 

    // Web Uploader實例

 

    uploader;

 

    

 

    // 初始化Web Uploader

 

    var uploader = WebUploader.create({

 

        // 選完文件後，是否自動上傳。

 

        auto: true,

 

        // swf文件路徑

 

        swf: basePath + '/scripts/webuploader/Uploader.swf',

 

        // 文件接收服務端。

 

        server: basePath + '/cms/notices/upload8.do',

 

//fileVal : "file", // 指定input標籤name的屬性值

 

        

 

        threads:'5',        //同時運行5個線程傳輸

 

        fileNumLimit:'10',  //文件總數量只能選擇10個 

 

        // 選擇文件的按鈕。可選。

 

        // 內部根據當前運行是建立，多是input元素，也多是flash.

 

// pick: '#filePicker',

 

        

 

        pick: { id:'#filePicker',  //選擇文件的按鈕

 

                multiple:true }, 

 

        // 只容許選擇圖片文件。

 

        accept: {

 

            title: 'Images',

 

            extensions: 'gif,jpg,jpeg,bmp,png',

 

            mimeTypes: 'image/*'

 

        }

 

    });

 

    

 

    // 當有文件添加進來的時候，

 

//監聽fileQueued事件，經過uploader.makeThumb來建立圖片預覽圖。

 

//PS: 這裏獲得的是Data URL數據，IE六、IE7不支持直接預覽。能夠藉助FLASH或者服務端來完成預覽。

 

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

 

        var $li = $(

 

                '<div id="' + file.id + '" class="file-item thumbnail">' +

 

                    '<img>' +

 

                    '<div class="info">' + file.name + '</div>' +

 

                '</div>'

 

                ),

 

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

 

// $list爲容器jQuery實例 

 

         $list.append( $li );

 

 

 

        // 建立縮略圖, thumbnailWidth x thumbnailHeight 爲 100 x 100

 

        uploader.makeThumb( file, function( error, src ) { //webuploader方法 

 

            if ( error ) {

 

                $img.replaceWith('<span>不能預覽</span>');

 

                return;

 

            }

 

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

 

        }, thumbnailWidth, thumbnailHeight );

 

    });

 

   // 而後剩下的就是上傳狀態提示了，當文件 上傳過程當中, 上傳成功，上傳失敗，上傳完成

 

// 都分別對應uploadProgress, uploadSuccess, uploadError, uploadComplete事件。

 

    // 文件上傳過程當中建立進度條實時顯示。

 

    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,response) {

 

        $( '#'+file.id ).addClass('upload-state-done');

 

        

 

    });

 

 

 

    // 文件上傳失敗，現實上傳出錯。

 

    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();

 

    });

 

    //綁定提交事件

 

    $("#btn").click(function() {

 

        console.log("上傳...");

 

        uploader.upload();   //執行手動提交

 

        console.log("上傳成功");

 

      });

 

    

 

});

 

就這樣搞定了，普通的前端上傳功能就交給了WebUploader組件了，後端處理就交給SpringMVC了。這個開源上傳組件的功能很是強大，能夠進行分片上傳、在線預覽、大文件斷點上傳。

後面如有時間再一一介紹實現其餘的強大功能~~~