Yii2 framework學習筆記(八)

jquery-file-upload（http://blueimp.github.io/jQuery-File-Upload/）是一個優秀的檔案ajax上傳插件，支援多選，預覽，並發上傳等。

jquery-file-upload已有現成的yii2外掛程式（https://github.com/2amigos/yii2-file-upload-widget），安裝也使用composer。

在composer.json裡加入"2amigos/yii2-file-upload-widget": "~1.0"，再運行composer update

這個外掛只提供了前台顯示的功能（前台的實作也有些缺陷，下文提），並未提供後台處理程式碼，而且連例子都沒有，需要自己摸索。

前台使用範例裡的程式碼，直接複製貼上。

<?php

// with UI

use dosamigos\fileupload\FileUploadUI;
?>
<?= FileUploadUI::widget([
    &#39;model&#39; => $model,
    &#39;attribute&#39; => &#39;image&#39;,
    &#39;url&#39; => [&#39;media/upload&#39;, &#39;id&#39; => $tour_id],
    &#39;gallery&#39; => false,
    &#39;fieldOptions&#39; => [
            &#39;accept&#39; => &#39;image/*&#39;
    ],
    &#39;clientOptions&#39; => [
            &#39;maxFileSize&#39; => 2000000
    ],
    // ...
    &#39;clientEvents&#39; => [
            &#39;fileuploaddone&#39; => &#39;function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }&#39;,
            &#39;fileuploadfail&#39; => &#39;function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }&#39;,
    ],
]);
?>

介面如下

根據裡面的配置，我們需要新建兩個文件，一個ImageUploadModel.php，內麵包含image欄位

class UploadImageForm extends Model {

	public $image;
	
	public function getImage() {
		return $this->image;
	}
	
	public function setImage($newOne) {
		$this->image = $newOne;
	}
}

一個控制器MediaController.php，包括在寫作業傳回的這些內容要根據原始插件的文檔來，yii2插件網站上完全沒有提供相關資訊。

參考網址：https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side-upload-handler

還需要提供actionDelete方法，用於刪除

然後做些自訂的功能。在列表項目裡加個textarea用於輸入圖片備註，如圖。

這裡需要修改yii2vendor2amigosyii2-file-upload-widgetsrcviewsupload.php

這個檔案是每個單行的模板，加入一個textarea

這個檔案是每個單行的模板，加入一個textarea

多張照片，並發上傳的話，後面收到的都是第一張請求裡的圖片，原本的圖片都沒辦法上傳。

懷疑是因為fileinput的name都是UploadImageForm[image]引起，但未證實，望知道的告知。

處理方法是停用並發上傳，使用同步上傳方式，如上圖，加入'sequentialUploads' => true的選項

 以上就是Yii2 framework學習筆記(八) 的內容，更多相關內容請關注PHP中文網（ www.php.cn）！