Exemple php de didacticiel d'utilisation du composant de téléchargement multi-images yii2

Cet article présente principalement le tutoriel d'utilisation du composant de téléchargement multi-images yii2. Il y a de nombreux points à prendre en compte lors de l'utilisation. L'éditeur ci-dessous le partagera avec vous sur la plateforme Script Home. it

Récemment, lorsque j'utilisais yii2 pour développer une page de formulaire, il était nécessaire de télécharger plusieurs images. J'ai recherché des composants dans cette zone et j'ai essentiellement trouvé le composant fileInput, j'ai donc essayé d'utiliser cette bibliothèque. pour compléter la page du formulaire back-end. Au cours du processus d'utilisation, j'ai constaté qu'il y avait encore de nombreux petits détails auxquels il fallait prêter attention, j'ai donc enregistré le processus d'utilisation.

yii2-widget-fileinput L'adresse github de cette bibliothèque est ici La partie installation est très courante, il suffit de suivre la documentation.

Jetons un coup d'œil à plusieurs opérations courantes présentées dans les documents officiels :

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 &#39;<label class="control-label">Add Attachments</label>&#39;;
echo FileInput::widget([
  &#39;model&#39; => $model,
  &#39;attribute&#39; => &#39;attachment_1[]&#39;,
  &#39;options&#39; => [&#39;multiple&#39; => true]
]);
// 不绑定model的使用方法
echo &#39;<label class="control-label">Upload Document</label>&#39;;
echo FileInput::widget([
  &#39;name&#39; => &#39;attachment_3&#39;,
]);
// 不可点击的示例
echo &#39;<label class="control-label">Select Attachment</label>&#39;;
echo FileInput::widget([
  &#39;name&#39; => &#39;attachment_4&#39;,
  &#39;disabled&#39; => true
]);

Ce sont des opérations courantes, imaginons-les, nous devons terminer l'ajout de produits sur Taobao. Il existe une table de produits avec plusieurs images dans une relation un-à-plusieurs. À ce stade, nous devons utiliser la fonction de téléchargement multi-images. Et nous souhaitons également télécharger des images de manière asynchrone, afin de pouvoir configurer notre composant fileInput comme ceci

<?= $form->field($model, &#39;image[]&#39;)->label($label)->widget(FileInput::classname(), [
  // &#39;name&#39; => &#39;ImgSelect&#39;,
  &#39;language&#39; => &#39;zh-CN&#39;, 
  &#39;options&#39; => [&#39;multiple&#39; => true, &#39;accept&#39; => &#39;image/*&#39;], 
  &#39;pluginOptions&#39; => [ 
    &#39;initialPreview&#39; => $initialPreview, 
    &#39;initialPreviewConfig&#39; => $initialPreviewConfig, 
    &#39;allowedPreviewTypes&#39; => [&#39;image&#39;], 
    &#39;allowedFileExtensions&#39; => [&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;], 
    &#39;previewFileType&#39; => &#39;image&#39;, 
    &#39;overwriteInitial&#39; => false, 
    &#39;browseLabel&#39; => &#39;选择图片&#39;,
    &#39;msgFilesTooMany&#39; => "选择上传的图片数量({n}) 超过允许的最大图片数{m}！", 
    &#39;maxFileCount&#39; => 5,//允许上传最多的图片5张 
    &#39;maxFileSize&#39; => 2048,//限制图片最大200kB 
    &#39;uploadUrl&#39; => Url::to([&#39;/upload/image&#39;]),
    //&#39;uploadExtraData&#39; => [&#39;testid&#39; => &#39;listimg&#39;], 
    &#39;uploadAsync&#39; => true,//配置异步上传还是同步上传 
  ],
  &#39;pluginEvents&#39; => [ 
    &#39;filepredelete&#39; => "function(event, key) { 
        return (!confirm(&#39;确认要删除&#39;)); 
      }", 
    &#39;fileuploaded&#39; => &#39;function(event, data, previewId, index) { 
        $(event.currentTarget.closest("form")).append(data.response.imgfile);
      }&#39;, 
    &#39;filedeleted&#39; => &#39;function(event, key) { 
        $(event.currentTarget.closest("form")).find("#"+key).remove(); 
        return;
      }&#39;, 
  ]
]); ?>

Nous configurons la configuration de navigation dans les images dans le contrôleur, entrant . J'ai ajouté une configuration aux points clés du code. Nous pouvons voir que l'URL de téléchargement asynchrone a été configurée dans le contrôleur de téléchargement/image, et nous avons également ajouté js lorsque la suppression, le téléchargement et d'autres opérations de rappel sont terminées.

Comme mentionné ci-dessus, nous avons répertorié quelques propriétés et paramètres de base du composant FileInput. Si nécessaire, vous pouvez consulter le document pour une description détaillée des propriétés.

Regardez comment nous écrivons la fonction actionImage dans le contrôleur qui télécharge des images

/** 
  * 上传图片到临时目录 
  * @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=&#39;" . $imgpath . "&#39; class=&#39;file-preview-image&#39; alt=&#39;" . $filename . "&#39; title=&#39;" . $filename . "&#39;>"); 
           $config = [ 
             &#39;caption&#39; => $filename, 
             &#39;width&#39; => &#39;120px&#39;, 
             &#39;url&#39; => &#39;../upload/delete&#39;, // server delete action 
             &#39;key&#39; => $pickey,
             &#39;extra&#39; => [&#39;filename&#39; => $filename] 
           ];
           array_push($initialPreviewConfig, $config); 
           $res = [ 
             "initialPreview" => $initialPreview, 
             "initialPreviewConfig" => $initialPreviewConfig, 
             "imgfile" => "<input name=&#39;image[]&#39; id=&#39;" . $pickey . "&#39; type=&#39;hidden&#39; value=&#39;" . $imgpath . "&#39;/>",
             &#39;filename&#39; => $filename,
             &#39;imagePath&#39; => $imgpath,
           ]; 
         }
       } 
     } 
     return json_encode($res); 
   } 
 }

C'est tout, téléchargez plusieurs images Nous avons terminé le travail parfaitement.

Afin d'obtenir l'effet de suppression d'images, vous pouvez d'abord télécharger deux images. Vous pouvez télécharger une seule image ou plusieurs images.

Une fois le téléchargement réussi, vous pouvez actualiser la page actuelle. Parce que nous avons implémenté l'aperçu de l'image dans le contrôleur depuis le début, les deux images que nous avons téléchargées devraient être affichées.

Je ne parlerai pas de la fonction de suppression. Tant que vous configurez l'URL supprimée dans le navigateur, la même opération est effectuée.

Résumé

Ce qui précède est le tutoriel d'utilisation du composant de téléchargement multi-images yii2 introduit par l'éditeur. J'espère qu'il sera utile. à tout le monde. , si vous avez des questions, laissez-moi un message et l'éditeur vous répondra à temps. Je tiens également à vous remercier tous pour votre soutien au site Web de Script House !

Articles qui pourraient vous intéresser :

Implémentation PHP d'un exemple php de code de cas de connexion utilisateur

Exemple d'analyse de la méthode ThinkPHP pour éviter la soumission répétée de formulaires Exemple PHP

Analyse de la méthode d'affichage de la pagination PHP [Vous trouverez ci-joint les compétences php de la classe de pagination générale PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!