Verwendung der Multi-Image-Upload-Komponente yii2

Dieser Artikel stellt hauptsächlich die Verwendung der yii2-Komponente zum Hochladen mehrerer Bilder vor, die einen gewissen Referenzwert hat. Jetzt kann ich sie mit allen teilen, die sie benötigen.

Ich habe kürzlich yii2 verwendet, um eine zu entwickeln Als ich mehrere Bild-Uploads benötigte, suchte ich in diesem Bereich nach Komponenten und fand im Grunde die Amway-FileInput-Komponente, also versuchte ich, diese Bibliothek zu verwenden, um die Funktion zum Hochladen mehrerer Bilder des Back-End-Formulars zu vervollständigen Seite. Während des Nutzungsprozesses habe ich festgestellt, dass noch viele kleine Details beachtet werden müssen, also habe ich den Nutzungsprozess aufgezeichnet.

yii2-widget-fileinput Die Github-Adresse dieser Bibliothek finden Sie hier. Der Installationsteil ist sehr routinemäßig. Befolgen Sie einfach die Dokumentation.

Werfen wir einen Blick auf einige gängige Operationen, die in den offiziellen Dokumenten aufgeführt sind:

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
]);

Und das sind gängige Operationen, stellen wir uns vor, wir Um das Hinzufügen von Produkten auf Taobao abzuschließen, gibt es eine Produkttabelle mit mehreren Bildern in einer Eins-zu-Viele-Beziehung. Zu diesem Zeitpunkt müssen Sie die Funktion zum Hochladen mehrerer Bilder verwenden. Und wir möchten Bilder auch asynchron hochladen, damit wir unsere FileInput-Komponente wie folgt konfigurieren können:

<?= $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;, 
  ]
]); ?>

Wir konfigurieren die Bildbrowserkonfiguration im Controller und übergeben sie. Komm In. Ich habe den Schlüsselpunkten im Code Konfiguration hinzugefügt. Wir können sehen, dass die asynchrone Upload-URL im Upload-/Bild-Controller konfiguriert wurde, und wir haben auch js hinzugefügt, wenn Lösch-, Upload- und andere Vorgänge abgeschlossen sind.

Wie oben erwähnt, haben wir einige grundlegende Eigenschaften und Einstellungen der Komponente FileInput aufgelistet. Bei Bedarf können Sie das Dokument für eine detaillierte Beschreibung der Eigenschaften überprüfen.

Schauen Sie sich an, wie wir die actionImage-Funktion in den Controller schreiben, der Bilder hochlädt

/** 
  * 上传图片到临时目录 
  * @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); 
   } 
 }

Das ist es, die Arbeit des Hochladens mehrerer Bilder haben wir habe es perfekt hinbekommen.

Um den Effekt des Löschens von Bildern zu erzielen, können Sie zunächst zwei Bilder hochladen. Sie können ein einzelnes Bild oder mehrere Bilder hochladen.

Nachdem der Upload erfolgreich war, können Sie die aktuelle Seite aktualisieren. Da wir die Bildvorschau von Anfang an im Controller implementiert haben, sollten die beiden von uns hochgeladenen Bilder angezeigt werden.

Ich werde nicht auf die Löschfunktion eingehen, solange Sie die gelöschte URL im Browser konfigurieren.

Verwandte Empfehlungen:

Yii2.0 verwendet das SDK von Alibaba Cloud OSS zum Hochladen, Herunterladen und Löschen von Bildern

Das obige ist der detaillierte Inhalt vonVerwendung der Multi-Image-Upload-Komponente yii2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!