Yii2組件之多圖上傳插件FileInput的詳細(xì)使用教程
在前面給大家寫個(gè)有關(guān)文件上傳的文章,包括最基本的yii2文件上傳、異步上傳到又拍云以及百度編輯器圖片上傳的問(wèn)題,貌似不說(shuō)點(diǎn)多圖上傳的就不完美。
今天介紹一款多圖上傳的插件 FileInput,至于為什么選中了TA作為我們上傳的插件,一來(lái)這貨跟Yii2有一腿,用起來(lái)方便;二來(lái)嘛,用這個(gè)插件不僅添加的時(shí)候好操作,修改的時(shí)候也可以直接通過(guò)異步的方式將圖片悄無(wú)聲息的刪掉;最值得一提的是,界面效果融合了bootstrap,清爽簡(jiǎn)潔美觀,看起來(lái)舒服。
說(shuō)重點(diǎn),看具體步驟
首先還是先安裝組件
composer require kartik-v/yii2-widget-fileinput "@dev"
先做一個(gè)必要的說(shuō)明:假設(shè)我們有一張商品表,一張商品圖片表,商品圖片表只對(duì)商品id和圖片地址進(jìn)行存儲(chǔ)
看基本使用
use kartik\file\FileInput; // 非ActiveForm的表單 echo '<label class="control-label">圖片</label>'; echo FileInput::widget([ 'model' => $model, 'attribute' => 'image[]', 'options' => ['multiple' => true] ]); //使用ActiveForm的表單 echo $form->field($model, 'image[]')->widget(FileInput::classname(), [ 'options' => ['multiple' => true], ]);
上面上傳多圖,只需要設(shè)置multiple=true即可,記得選擇圖片的時(shí)候多選。
如此一來(lái),圖片選擇好了直接提交表單就好,文件上傳的程序需要自行處理,如果你還沒(méi)有實(shí)現(xiàn),可以參考文件上傳的基本操作。
多圖上傳的唯一麻煩就是,修改的時(shí)候怎么才方便?不著急,F(xiàn)ileInput都幫我們解決了!
我們看編輯的時(shí)候圖片的展示以及如何異步的刪除單個(gè)或者多個(gè)圖片!
// 視圖文件 use kartik\file\FileInput; <?php $form = ActiveForm::begin([ 'options' => ['enctype'=>'multipart/form-data'], ]); ?> <?php echo $form->field($model, 'banner_url[]')->label('banner圖')->widget(FileInput::classname(), [ 'options' => ['multiple' => true], 'pluginOptions' => [ // 需要預(yù)覽的文件格式 'previewFileType' => 'image', // 預(yù)覽的文件 'initialPreview' => ['圖片1', '圖片2', '圖片3'], // 需要展示的圖片設(shè)置,比如圖片的寬度等 'initialPreviewConfig' => ['width' => '120px'], // 是否展示預(yù)覽圖 'initialPreviewAsData' => true, // 異步上傳的接口地址設(shè)置 'uploadUrl' => Url::toRoute(['/goods/async-image']), // 異步上傳需要攜帶的其他參數(shù),比如商品id等 'uploadExtraData' => [ 'goods_id' => $id, ], 'uploadAsync' => true, // 最少上傳的文件個(gè)數(shù)限制 'minFileCount' => 1, // 最多上傳的文件個(gè)數(shù)限制 'maxFileCount' => 10, // 是否顯示移除按鈕,指input上面的移除按鈕,非具體圖片上的移除按鈕 'showRemove' => true, // 是否顯示上傳按鈕,指input上面的上傳按鈕,非具體圖片上的上傳按鈕 'showUpload' => true, //是否顯示[選擇]按鈕,指input上面的[選擇]按鈕,非具體圖片上的上傳按鈕 'showBrowse' => true, // 展示圖片區(qū)域是否可點(diǎn)擊選擇多文件 'browseOnZoneClick' => true, // 如果要設(shè)置具體圖片上的移除、上傳和展示按鈕,需要設(shè)置該選項(xiàng) 'fileActionSettings' => [ // 設(shè)置具體圖片的查看屬性為false,默認(rèn)為true 'showZoom' => false, // 設(shè)置具體圖片的上傳屬性為true,默認(rèn)為true 'showUpload' => true, // 設(shè)置具體圖片的移除屬性為true,默認(rèn)為true 'showRemove' => true, ], ], // 一些事件行為 'pluginEvents' => [ // 上傳成功后的回調(diào)方法,需要的可查看data后再做具體操作,一般不需要設(shè)置 "fileuploaded" => "function (event, data, id, index) { console.log(data); }", ], ]); ?> <?php ActiveForm::end(); ?>
如上所述,基本上都是組件 FileInput的基本屬性和設(shè)置,我們這里也僅僅羅列了一些常用的屬性介紹,如有所需,可查看文檔看屬性的詳細(xì)說(shuō)明。
按照如上所配置,我們預(yù)覽下效果圖
感覺(jué)上效果很是可以,在開(kāi)始寫php代碼實(shí)現(xiàn)之前,我們先在controller中實(shí)現(xiàn) initialPreview和 initialPreviewConfig的配置
假設(shè)上面的視圖文件是用戶展示商品圖片的詳情頁(yè),當(dāng)前controller是指渲染視圖文件的controller,則需要在controller中獲取商品關(guān)聯(lián)的圖片,用于展示或者說(shuō)用于商品圖片的刪除\新增操作。
// 假設(shè)商品的圖片是 $relationBanners,$id是商品的id // $relationBanners的數(shù)據(jù)結(jié)構(gòu)如: /** * Array *( * [0] => Array * ( * [id] => 1484314 * [goods_id] => 1173376 * [banner_url] => ./uploads/20160617/146612713857635322241f2.png * ) * *) */ $relationBanners = Banner::find()->where(['goods_id' => $id])->asArray()->all(); // 對(duì)商品banner圖進(jìn)行處理 $p1 = $p2 = []; if ($relationBanners) { foreach ($relationBanners as $k => $v) { $p1[$k] = $v['banner_url']; $p2[$k] = [ 'url' => Url::toRoute('/banner/delete'), 'key' => $v['id'], ]; } } $model = new Banner; return $this->render('banner', [ 'model' => $model, 'p1' => $p1, 'p2' => $p2, 'id' => $id ]);
你可以看到p1是圖片地址的集合,這里用于賦值給initialPreview
p2是一組url和key的集合,這里用于賦值給initialPreviewConfig
其中url是移除圖片的請(qǐng)求地址
key是每個(gè)圖片對(duì)應(yīng)的id
此時(shí)我們視圖文件中的pluginOptions應(yīng)該是這樣的
'pluginOptions' => [ // other code 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, // other code ],
注意設(shè)置initialPreviewAsData為true哦,不然等會(huì)創(chuàng)建圖片后,預(yù)覽圖不會(huì)顯示。
我們?cè)谝婚_(kāi)始配置文件中配置了uploadUrl,該參數(shù)是異步上傳的圖片地址。
現(xiàn)在看上傳界面應(yīng)該是光禿禿的,我們選擇一張圖片后效果如上圖2所示,
需要提醒的是,每張小圖片上的上傳是上傳對(duì)應(yīng)的小圖片,input框(右下角)的上傳和移除都是針對(duì)所有的圖片的操作,一張也是上傳,十張也是上傳,我們這里只對(duì)多圖上傳的操作做一個(gè)必要的說(shuō)明。
圖片上傳的地址以及上傳需要的額外參數(shù)(如商品id)我們都準(zhǔn)備好了,額外的參數(shù)配置項(xiàng)是uploadExtraData,具體見(jiàn)上面視圖文件中的配置。
接著我們看 /goods/async-image 異步上傳的程序?qū)崿F(xiàn)
public function actionAsyncImage () { // 商品ID $id = Yii::$app->request->post('goods_id'); $p1 = $p2 = []; if (empty($_FILES['Banner']['name']) || empty($_FILES['Banner']['name']['banner_url']) || !$id) { echo '{}'; return; } for ($i = 0; $i < count($_FILES['Banner']['name']['banner_url']); $i++) { $url = '/banner/delete'; $imageUrl = ''; //調(diào)用圖片接口上傳后返回圖片地址 // 圖片入庫(kù)操作,此處不可以批量直接入庫(kù),因?yàn)楹竺嫖覀冞€要把key返回 便于圖片的刪除 $model = new Banner; $model->goods_id = $id; $model->banner_url = $imageUrl; $key = 0; if ($model->save(false)) { $key = $model->id; } // $pathinfo = pathinfo($imageUrl); // $caption = $pathinfo['basename']; // $size = $_FILES['Banner']['size']['banner_url'][$i]; $p1[$i] = $imageUrl; $p2[$i] = ['url' => $url, 'key' => $key]; } echo json_encode([ 'initialPreview' => $p1, 'initialPreviewConfig' => $p2, 'append' => true, ]); return; }
到此,單圖和多圖上傳的工作我們也就完成了。
為了實(shí)現(xiàn)圖片的刪除效果,這里可以先上傳兩張圖片。你可以單張上傳也可以多張上傳。
上傳成功后你可以刷新當(dāng)前頁(yè)面,因?yàn)橐婚_(kāi)始我們就在controller中實(shí)現(xiàn)了圖片的預(yù)覽工作,所以理應(yīng)會(huì)展示我們已經(jīng)上傳的兩張圖片。
按照我們的配置,現(xiàn)在的預(yù)覽圖應(yīng)該是這樣的。
不說(shuō)廢話,我們看圖片刪除的程序(/banner/delete)實(shí)現(xiàn)
public function actionDelete () { if ($id = Yii::$app->request->post('key')) { $model = $this->findModel($id); $model->delete(); } Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; return ['success' => true]; }
需要提醒的是,key就是我們配置 initialPreviewConfig項(xiàng)時(shí)指定的key,你可以參考controller中的key,也可以參考異步上傳成功后p2的key.
到此,yii2中多圖上傳的組件使用以及程序代碼我們都給出了具體的實(shí)現(xiàn)。
以上所述是小編給大家介紹的Yii2組件之多圖上傳插件FileInput的詳細(xì)使用教程的全部敘述,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Yii2使用表單上傳文件的實(shí)例代碼
- Yii2使用自帶的UploadedFile實(shí)現(xiàn)的文件上傳
- yii2整合百度編輯器umeditor及umeditor圖片上傳問(wèn)題的解決辦法
- Yii2實(shí)現(xiàn)ajax上傳圖片插件用法
- yii2利用自帶UploadedFile實(shí)現(xiàn)上傳圖片的示例
- yii2 上傳圖片的示例代碼
- yii2高級(jí)應(yīng)用之自定義組件實(shí)現(xiàn)全局使用圖片上傳功能的方法
- Yii2.0使用阿里云OSS的SDK上傳圖片、下載、刪除圖片示例
- yii2.0整合阿里云oss上傳單個(gè)文件的示例
- Yii2.0多文件上傳實(shí)例說(shuō)明
- yii2多圖上傳組件的使用教程
- YII2框架實(shí)現(xiàn)表單中上傳單個(gè)文件的方法示例
相關(guān)文章
Laravel5.1 框架關(guān)聯(lián)模型之后操作實(shí)例分析
這篇文章主要介紹了Laravel5.1 框架關(guān)聯(lián)模型之后操作,結(jié)合實(shí)例形式分析了laravel5.1框架寫入關(guān)聯(lián)模型、更新關(guān)聯(lián)關(guān)系等相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-01-01PHP實(shí)現(xiàn)的網(wǎng)站目錄掃描索引工具
本文給大家分享的是一個(gè)基于PHP實(shí)現(xiàn)的網(wǎng)站目錄掃描索引工具的源碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下2016-09-09PHP如何通過(guò)AJAX方式實(shí)現(xiàn)登錄功能
PHP是一門很好的語(yǔ)言,可以很方便的開(kāi)發(fā)web應(yīng)用程序,下面介紹一下Ajax+PHP+MySQL登陸示例,感興趣的小伙伴們可以參考一下2015-11-11yii框架數(shù)據(jù)庫(kù)關(guān)聯(lián)查詢操作示例
這篇文章主要介紹了yii框架數(shù)據(jù)庫(kù)關(guān)聯(lián)查詢操作,結(jié)合實(shí)例形式總結(jié)分析了yii數(shù)據(jù)庫(kù)關(guān)聯(lián)查詢的常見(jiàn)操作方法與使用注意事項(xiàng),需要的朋友可以參考下2019-10-10最新制作ThinkPHP3.2.3完全開(kāi)發(fā)手冊(cè)
本文給大家分享的是作者花了3個(gè)多小時(shí)制作完成的ThinkPHP3.2.3完全開(kāi)發(fā)手冊(cè),非常的細(xì)致全面,有需要的小伙伴可以參考下2015-11-11PHP實(shí)現(xiàn)一個(gè)簡(jiǎn)單url路由功能實(shí)例
這篇文章主要介紹了PHP實(shí)現(xiàn)一個(gè)簡(jiǎn)單url路由功能實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-11-11