最近在使用yii2開發一個表單頁面的時候，有多圖上傳的需求，稍微找了找這方面的組件，基本都安利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::html' target='_blank'>classname(), [ options = [ accept = image/* ],// 多圖上傳示例echo label >
而這些都是常規操作，我們來設想一下，我們要完成淘寶的商品添加，有個商品表，有著一對多關系的若干張圖片，這時候就需要用到多圖上傳功能了。而且我們還希望上傳圖片是異步的，那么我們可以這么配置我們的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 . >
到此，多圖上傳的工作我們也就完美的實現了。
為了實現圖片的刪除效果，這里可以先上傳兩張圖片。你可以單張上傳也可以多張上傳。
上傳成功后你可以刷新當前頁面，因為一開始我們就在controller中實現了圖片的預覽工作，所以理應會展示我們已經上傳的兩張圖片。
至于刪除函數就不講了，只要在瀏覽里配置上刪除的url，也是一樣的操作咯。
總結
以上所述是小編給大家介紹的yii2多圖上傳組件的使用教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:
PHP實現用戶登錄的案例代碼php實例
ThinkPHP防止重復提交表單的方法實例分析php實例
PHP分頁顯示的方法分析【附PHP通用分頁類php技巧
以上就是yii2多圖上傳組件的使用教程php實例的詳細內容，PHP教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。