THINKPHP5使用webuploader單圖、多圖上傳

續：基於THINKPHP5 使用webuploader 大文件分片上傳合並
之后，使用webuploader多圖片與單圖上傳，以做參考

html代碼部分

        <div class="demo">
            <h3>2、圖片上傳</h3>
            <div id="uploadimg">
                <div id="fList_222" class="uploader-list"></div>
                <div id="Pick_222">選擇圖片</div>
            </div>
        </div>

 下面的重要的js部分

uploaderPics(222,'photo');        //多圖上傳
uploaderOnePic(222,'photo');    //單圖上傳

 我自己封裝的webuploader上傳函數

//單圖上傳
//ids唯一ID
//folder文件保存目錄
function uploaderOnePic(ids,folder) {
    //上傳圖片
     // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 選完文件后，是否自動上傳。
        auto: true,
        // swf文件路徑
        swf: '__PUBLIC__/ueditor/third-party/webuploader/Uploader.swf',

        // 文件接收服務端。
        server: '{:url("admin/upload/uploadpic")}',
        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是創建，可能是input元素，也可能是flash.
        pick: {id:"#Pick_"+ids,
            multiple: false   //只能選擇一個文件上傳
        },
        //限制只能上傳一個文件
        fileNumLimit: 1, 
        formData: {
            folder:folder  //自定義參數
        },
        // 只允許選擇圖片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 當有文件添加進來的時候
    uploader.on( 'fileQueued', function( file ) {
        var $list = $("#fList_"+ids),
            $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
            $img = $li.find('img');


        // $list為容器jQuery實例
        $list.html( $li );

        // 創建縮略圖
        // 如果為非圖片文件，可以不用調用此方法。
        // thumbnailWidth x thumbnailHeight 為 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能預覽</span>');
                return;
            }

            $img.attr( 'src', src );
        }, 100, 100 );
    });
    // 文件上傳過程中創建進度條實時顯示。
    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');
        $("#fList_"+ids).append('<input type="hidden" name="'+ids+'[]" value="'+response.filePath+'" />');

    });

    // 文件上傳失敗，顯示上傳出錯。
    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();
    });
}

//多圖上傳
//ids唯一ID
//folder文件保存目錄
function uploaderPics(ids,folder) {
    //上傳圖片
     // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 選完文件后，是否自動上傳。
        auto: true,
        // swf文件路徑
        swf: '__PUBLIC__/ueditor/third-party/webuploader/Uploader.swf',

        // 文件接收服務端。
        server: '{:url("admin/upload/uploadpic")}',
        // 選擇文件的按鈕。可選。
        // 內部根據當前運行是創建，可能是input元素，也可能是flash.
        pick: "#Pick_"+ids,
        formData: {
            folder:folder  //自定義參數
        },
        // 只允許選擇圖片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 當有文件添加進來的時候
    uploader.on( 'fileQueued', function( file ) {
        var $list = $("#fList_"+ids),
            $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 );
        }, 100, 100 );
    });
    // 文件上傳過程中創建進度條實時顯示。
    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');
        $("#fList_"+ids).append('<input type="hidden" name="'+ids+'[]" value="'+response.filePath+'" />');

    });

    // 文件上傳失敗，顯示上傳出錯。
    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控制器上傳方法，也可以使用之前的文件上傳方法

    //圖片上傳
    public function uploadpic(){
        $file = $this->request->file('file');//file是傳文件的名稱，這是webloader插件固定寫入的。因為webloader插件會寫入一個隱藏input，這里與TP5的寫法有點區別
        $file->size = 524288000;
        $folder = input('folder');
        if ($folder) {
            //保存目錄
            $Path = 'public' . DS . 'uploads' . DS . $folder;
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . $folder);
        }else{
            $Path = 'public' . DS . 'uploads';
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        }

        if($info){
            // 成功上傳后 獲取上傳信息
            // 輸出 jpg 地址
            $filePath = "/".$Path. DS .$info->getSaveName();
            $filePath = str_replace("\\","/",$filePath);   //替換\為/
            return json(['success'=>true,'filePath'=>$filePath]);
        }else{
            // 上傳失敗獲取錯誤信息
            echo $file->getError();
        }
    }

 OK，完成