yii2 다중 이미지 업로드 구성 요소 사용 튜토리얼 PHP 예제
- jacklove원래의
- 2018-06-25 17:59:181580검색
이 글은 주로 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 다중 이미지 업로드 컴포넌트 사용 튜토리얼입니다. 궁금한 점이 있으면 메시지를 남겨주세요. 편집자는 제 시간에 응답할 것입니다. 또한 Script House 웹사이트를 지원해 주시는 모든 분들께 감사의 말씀을 전하고 싶습니다!
당신이 관심을 가질 만한 기사:
ThinkPHP 방법을 사용하여 반복적인 양식 제출을 방지하는 방법 예제 분석 PHP 예제
PHP 페이징 표시 방법 분석 [함께 PHP 일반 페이징 PHP 팁
위 내용은 yii2 다중 이미지 업로드 구성 요소 사용 튜토리얼 PHP 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!