這是效果圖


上傳後的樣式有點問題,這裡就先不調樣式了
以下是程式碼:
首先在頁面中引入webuploader外掛需要的css和js檔案

    <div class="input_g">
        <div class="input_title">產品圖：</div>
        <!-- <div class="input_info"><img src="__IMAGE__/add_img.jpg" width="80" height="60"  alt=""/></div> -->
        <!--用來存放item-->
        <div id="fileList" class="uploader-list"></div>
        <div id="filePicker">選擇圖片</div>
    </div>
 

這裡是script標籤中的內容—-我寫在了同一個頁面中,你們也可以選擇引入檔案
// 初始化Web Uploader
var uploader = WebUploader.create({

    // 選完檔案後，是否自動上傳。
    auto: true,

    // swf檔案路徑--這裡的路徑一定要寫對
    swf: '/static/webuploader/Uploader.swf',

    // 檔案接收服務端--這裡選擇提交到的控制器的方法就可以
    server: '{:url("portal/product/upload")}',

    // 選擇檔案的按鈕。可選。
    // 內部根據當前執行是建立，可能是input元素，也可能是flash.
    pick: '#filePicker',

    // 只允許選擇圖片檔案。
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    }
});

// 當有檔案新增進來的時候
uploader.on( 'fileQueued', function( file ) {
    var $list=$("#fileList");
    var thumbnailWidth = 100;   //縮圖高度和寬度 （單位是畫素），當寬高度是0~1的時候，是按照百分比計算，具體可以看api文件  
    var thumbnailHeight = 100;
    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 ) {
        if ( error ) {
            $img.replaceWith('<span>不能預覽</span>');
            return;
        }

        $img.attr( 'src', src );
    }, thumbnailWidth, thumbnailHeight );
});

// 檔案上傳過程中建立進度條實時顯示。
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 ) {
    $( '#'+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();
});
 

這樣,在頁面中就可以先看到效果了,選擇完圖片就可以預覽,控制器中接收圖片的方法,tp5框架手冊中的方法就可以接收到.我使用的也是手冊中的方法