最近在使用 yii2 开发一个表单页面的时候, 有多图上传的需求, 稍微找了找这方面的组件, 基本都安利 fileInput 这个组件, 于是就尝试着使用这个库来完成后端表单页面的多图上传功能. 使用的过程中发现还是有不少小细节需要注意的, 于是记录一下使用的过程.
https://github.com/kartik-v/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
- ]);
而这些都是常规操作, 我们来设想一下, 我们要完成淘宝的商品添加, 有个商品表, 有着一对多关系的若干张图片, 这时候就需要用到多图上传功能了. 而且我们还希望上传图片是异步的, 那么我们可以这么配置我们的 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 已经配置到了 upload/image 这个控制器里, 而我们也在删除, 上传等操作完成时加上了 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);
- }
- }
到此, 多图上传的工作我们也就完美的实现了.
为了实现图片的删除效果, 这里可以先上传两张图片. 你可以单张上传也可以多张上传.
上传成功后你可以刷新当前页面, 因为一开始我们就在 controller 中实现了图片的预览工作, 所以理应会展示我们已经上传的两张图片.
至于删除函数就不讲了, 只要在浏览里配置上删除的 url, 也是一样的操作咯.
来源: http://www.jianshu.com/p/61b55836631e