Yii2 framework study notes (8)

jquery-file-upload (http://blueimp.github.io/jQuery-File-Upload/) is an excellent file ajax upload plug-in that supports multiple selection, preview, concurrent upload, etc.

jquery-file-upload already has a ready-made yii2 plug-in (https://github.com/2amigos/yii2-file-upload-widget), and composer is also used for installation.

Add "2amigos/yii2-file-upload-widget": "~1.0" to composer.json, and then run composer update

This plug-in only provides the function of front-end display (front-end The implementation also has some flaws (mentioned below). The background processing code is not provided, and there are no examples. You need to explore it yourself.

Copy and paste the code in the front-end usage example directly.

<?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;,
    ],
]);
?>

The interface is as follows

##According to the configuration inside, we need to create two new files, one ImageUploadModel.php, which contains the image field

class UploadImageForm extends Model {

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

A controller MediaController.php, including the actionUpload method

The content returned by the background should be based on the original plug-in documentation. There is no relevant information provided on the yii2 plug-in website.

Reference URL: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#using-jquery-file-upload-ui-version-with-a-custom-server-side -upload-handler

also needs to provide the actionDelete method, which is used to delete

and then do some custom functions . Add a textarea to the list item for entering picture notes, as shown in the figure.

##You need to modify \yii2\vendor\2amigos\yii2-file-upload-widget\src\views\upload.php

This file is for each A single-line template, add a textarea

Another problem encountered in actual application is that if multiple photos are selected at the same time and uploaded concurrently, all the photos received later will It is the picture in the first request, and the original picture cannot be uploaded.

It is suspected that the name of the file input is UploadImageForm[image], but it has not been confirmed. I hope you can tell me if you know.

The solution is to disable concurrent uploads and use the synchronous upload method, as shown above, add the 'sequentialUploads' => true option

The above is the content of Yii2 framework study notes (8), more For more related content, please pay attention to the PHP Chinese website (www.php.cn)!