Yii2 framework學習筆記(八) -- 整合blueimp的jquery-file-upload插件

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([
    'model' => $model,
    'attribute' => 'image',
    'url' => ['media/upload', 'id' => $tour_id],
    'gallery' => false,
    'fieldOptions' => [
            'accept' => 'image/*'
    ],
    'clientOptions' => [
            'maxFileSize' => 2000000
    ],
    // ...
    'clientEvents' => [
            'fileuploaddone' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
            'fileuploadfail' => 'function(e, data) {
                                    console.log(e);
                                    console.log(data);
                                }',
    ],
]);
?>

界面如下

根據裏面的配置，我們需要新建兩個文件，一個ImageUploadModel.php，裏面包含image字段

class UploadImageForm extends Model {

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

一個控制器MediaController.php，包括actionUpload方法

後臺返回的這些內容要根據原插件的文檔來，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用於輸入圖片備註，如圖。

這裏需要修改\yii2\vendor\2amigos\yii2-file-upload-widget\src\views\upload.php

這個文件是每個單行的模板，加入一個textarea

然後要把新加的textarea的值傳到服務器的話，需要參考插件文檔：

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

修改widget的clientevent參數，如下

實際運用中還遇到另一個問題，如果同時選了多張照片，併發上傳的話，後面收到的都是第一個請求裏的圖片，原本的圖片都沒法上傳。

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

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