最近在使用yii2開發(fā)一個表單頁面的時候，有多圖上傳的需求，稍微找了找這方面的組件，基本都安利fileInput這個組件，于是就嘗試著使用這個庫來完成后端表單頁面的多圖上傳功能。使用的過程中發(fā)現(xiàn)還是有不少小細(xì)節(jié)需要注意的，于是記錄一下使用的過程。
yii2-widget-fileinput 這個庫的github地址在這里，安裝的部分就很常規(guī)了，按文檔走就可以了。
我們來看官方文檔展示的幾個常規(guī)操作：
use kartik\widgets\FileInput
// or 'use kartikile\FileInput' if you have only installed yii2-widget-fileinput in isolation
// 使用ActiveForm 和 model綁定的單張圖片示例
echo $form->field($model, 'avatar')->widget(FileInput::classname(), [
'options' => ['accept' => 'image/*'],
]);
// 多圖上傳示例
echo 'label class="control-label">Add Attachments/label>';
echo FileInput::widget([
'model' => $model,
'attribute' => 'attachment_1[]',
'options' => ['multiple' => true]
]);
// 不綁定model的使用方法
echo 'label class="control-label">Upload Document/label>';
echo FileInput::widget([
'name' => 'attachment_3',
]);
// 不可點擊的示例
echo 'label class="control-label">Select Attachment/label>';
echo FileInput::widget([
'name' => 'attachment_4',
'disabled' => true
]);
而這些都是常規(guī)操作，我們來設(shè)想一下，我們要完成淘寶的商品添加，有個商品表，有著一對多關(guān)系的若干張圖片，這時候就需要用到多圖上傳功能了。而且我們還希望上傳圖片是異步的，那么我們可以這么配置我們的fileInput組件
?= $form->field($model, 'image[]')->label($label)->widget(FileInput::classname(), [
// 'name' => 'ImgSelect',
'language' => 'zh-CN',
'options' => ['multiple' => true, 'accept' => 'image/*'],
'pluginOptions' => [
'initialPreview' => $initialPreview,
'initialPreviewConfig' => $initialPreviewConfig,
'allowedPreviewTypes' => ['image'],
'allowedFileExtensions' => ['jpg', 'gif', 'png'],
'previewFileType' => 'image',
'overwriteInitial' => false,
'browseLabel' => '選擇圖片',
'msgFilesTooMany' => "選擇上傳的圖片數(shù)量({n}) 超過允許的最大圖片數(shù){m}！",
'maxFileCount' => 5,//允許上傳最多的圖片5張
'maxFileSize' => 2048,//限制圖片最大200kB
'uploadUrl' => Url::to(['/upload/image']),
//'uploadExtraData' => ['testid' => 'listimg'],
'uploadAsync' => true,//配置異步上傳還是同步上傳
],
'pluginEvents' => [
'filepredelete' => "function(event, key) {
return (!confirm('確認(rèn)要刪除'));
}",
'fileuploaded' => 'function(event, data, previewId, index) {
$(event.currentTarget.closest("form")).append(data.response.imgfile);
}',
'filedeleted' => 'function(event, key) {
$(event.currentTarget.closest("form")).find("#"+key).remove();
return;
}',
]
]); ?>
我們在控制器配置好圖片瀏覽的配置，傳入進(jìn)來。代碼里的關(guān)鍵點我已經(jīng)加上了配置，我們可以看到，這時異步上傳的url已經(jīng)配置到了 upload/image 這個控制器里，而我們也在刪除，上傳等操作完成時加上了js的回調(diào)。
如上所述，我們羅列了一些都是組件 FileInput的基本屬性和設(shè)置，如有所需，可查看文檔看屬性的詳細(xì)說明。
看下上傳圖片的控制器里，我們是怎么寫 actionImage 這個函數(shù)的
/**
* 上傳圖片到臨時目錄
* @return string
* @throws \yii\base\Exception
*/
public function actionImage()
{
if (Yii::$app->request->isPost) {
$res = [];
$initialPreview = [];
$initialPreviewConfig = [];
$images = UploadedFile::getInstancesByName("UploadImage[image]");
if (count($images) > 0) {
foreach ($images as $key => $image) {
if ($image->size > 2048 * 1024) {
$res = ['error' => '圖片最大不可超過2M'];
return json_encode($res);
}
if (!in_array(strtolower($image->extension), array('gif', 'jpg', 'jpeg', 'png'))) {
$res = ['error' => '請上傳標(biāo)準(zhǔn)圖片文件, 支持gif,jpg,png和jpeg.'];
return json_encode($res);
}
$dir = '/uploads/temp/';
//生成唯一uuid用來保存到服務(wù)器上圖片名稱
$pickey = ToolExtend::genuuid();
$filename = $pickey . '.' . $image->getExtension();
//如果文件夾不存在，則新建文件夾
if (!file_exists(Yii::getAlias('@backend') . '/web' . $dir)) {
FileHelper::createDirectory(Yii::getAlias('@backend') . '/web' . $dir, 777);
}
$filepath = realpath(Yii::getAlias('@backend') . '/web' . $dir) . '/';
$file = $filepath . $filename;
if ($image->saveAs($file)) {
$imgpath = $dir . $filename;
/*Image::thumbnail($file, 100, 100)
->save($file . '_100x100.jpg', ['quality' => 80]);
*/
// array_push($initialPreview, "img src='" . $imgpath . "' class='file-preview-image' alt='" . $filename . "' title='" . $filename . "'>");
$config = [
'caption' => $filename,
'width' => '120px',
'url' => '../upload/delete', // server delete action
'key' => $pickey,
'extra' => ['filename' => $filename]
];
array_push($initialPreviewConfig, $config);
$res = [
"initialPreview" => $initialPreview,
"initialPreviewConfig" => $initialPreviewConfig,
"imgfile" => "input name='image[]' id='" . $pickey . "' type='hidden' value='" . $imgpath . "'/>",
'filename' => $filename,
'imagePath' => $imgpath,
];
}
}
}
return json_encode($res);
}
}
到此，多圖上傳的工作我們也就完美的實現(xiàn)了。
為了實現(xiàn)圖片的刪除效果，這里可以先上傳兩張圖片。你可以單張上傳也可以多張上傳。
上傳成功后你可以刷新當(dāng)前頁面，因為一開始我們就在controller中實現(xiàn)了圖片的預(yù)覽工作，所以理應(yīng)會展示我們已經(jīng)上傳的兩張圖片。
至于刪除函數(shù)就不講了，只要在瀏覽里配置上刪除的url，也是一樣的操作咯。
總結(jié)
以上所述是小編給大家介紹的yii2多圖上傳組件的使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- Yii2使用表單上傳文件的實例代碼
- Yii2使用自帶的UploadedFile實現(xiàn)的文件上傳
- Yii2組件之多圖上傳插件FileInput的詳細(xì)使用教程
- yii2整合百度編輯器umeditor及umeditor圖片上傳問題的解決辦法
- Yii2實現(xiàn)ajax上傳圖片插件用法
- yii2利用自帶UploadedFile實現(xiàn)上傳圖片的示例
- yii2 上傳圖片的示例代碼
- yii2高級應(yīng)用之自定義組件實現(xiàn)全局使用圖片上傳功能的方法
- Yii2.0使用阿里云OSS的SDK上傳圖片、下載、刪除圖片示例
- yii2.0整合阿里云oss上傳單個文件的示例
- Yii2.0多文件上傳實例說明
- YII2框架實現(xiàn)表單中上傳單個文件的方法示例
