yii2 다중 이미지 업로드 구성 요소 사용에 대한 튜토리얼
- 不言원래의
- 2018-06-01 13:57:461208검색
이 기사는 주로 yii2 다중 이미지 업로드 구성 요소 사용에 대한 튜토리얼을 소개합니다. 이는 특정 참조 가치가 있습니다. 이제 모든 사람과 공유합니다. 필요한 친구는 이를 참조할 수 있습니다.
최근에 yii2를 사용하여 양식 페이지를 개발할 때 , 이미지 업로드에 대한 수요를 충족시키기 위해 이 영역에서 구성 요소를 검색했으며 기본적으로 Amway fileInput 구성 요소를 찾았으므로 이 라이브러리를 사용하여 백엔드 양식 페이지의 다중 이미지 업로드 기능을 완성하려고 했습니다. . 사용 과정에서 주의해야 할 작은 세부 사항이 여전히 많다는 것을 알게 되었기 때문에 사용 과정을 기록했습니다.
yii2-widget-fileinput 이 라이브러리의 github 주소는 여기에 있습니다. 설치 부분은 매우 일상적이므로 설명서를 따르십시오.
공식 문서에 표시된 몇 가지 일반적인 작업을 살펴보겠습니다.
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 ]);
그리고 이것이 Taobao 제품 추가를 완료하고 싶다고 상상해 봅시다. -to-many. 서로 관련된 여러 장의 사진인 경우 다중 사진 업로드 기능을 사용해야 합니다. 또한 이미지를 비동기식으로 업로드하려고 하므로 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' => "选择上传的图片数量({n}) 超过允许的最大图片数{m}！",
'maxFileCount' => 5,//允许上传最多的图片5张
'maxFileSize' => 2048,//限制图片最大200kB
'uploadUrl' => Url::to(['/upload/image']),
//'uploadExtraData' => ['testid' => 'listimg'],
'uploadAsync' => true,//配置异步上传还是同步上传
],
'pluginEvents' => [
'filepredelete' => "function(event, key) {
return (!confirm('确认要删除'));
}",
'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;
}',
]
]); ?>
컨트롤러에서 이미지 검색 구성을 구성하고 이를 전달합니다. 코드의 주요 부분에 구성을 추가했는데, 업로드/이미지 컨트롤러에 비동기 업로드 URL이 구성되어 있는 것을 볼 수 있고, 삭제, 업로드 및 기타 작업이 완료되면 js도 추가한 것을 볼 수 있습니다.
위에서 언급했듯이 FileInput 구성 요소의 몇 가지 기본 속성과 설정이 나열되어 있습니다. 필요한 경우 속성에 대한 자세한 설명을 보려면 문서를 확인하세요.
이미지를 업로드하는 컨트롤러에 actionImage 함수를 어떻게 작성하는지 보세요
/**
* 上传图片到临时目录
* @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' => '请上传标准图片文件, 支持gif,jpg,png和jpeg.'];
return json_encode($res);
}
$dir = '/uploads/temp/';
//生成唯一uuid用来保存到服务器上图片名称
$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);
}
}
이제 여러 이미지를 업로드하는 작업을 완벽하게 구현했습니다.
사진 삭제 효과를 얻으려면 먼저 두 장의 사진을 업로드할 수 있습니다. 단일 이미지 또는 여러 이미지를 업로드할 수 있습니다.
업로드가 성공한 후 현재 페이지를 새로 고칠 수 있습니다. 처음부터 컨트롤러에 이미지 미리보기를 구현했기 때문에 업로드한 두 이미지가 표시되어야 합니다.
삭제 기능에 대해서는 언급하지 않겠습니다. 브라우저에서 삭제된 URL을 구성하면 동일한 작업이 수행됩니다.
위 내용은 yii2 다중 이미지 업로드 구성 요소 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!