PHP-Beispiel für die Verwendung einer yii2-Multi-Image-Upload-Komponente

In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung der yii2-Komponente zum Hochladen mehrerer Bilder vorgestellt. Es gibt viele Punkte, auf die Sie bei der Verwendung achten sollten. Der unten stehende Herausgeber wird es Ihnen auf der Script Home-Plattform mitteilen it

Als ich kürzlich yii2 zum Entwickeln einer Formularseite verwendete, musste ich in diesem Bereich nach Komponenten suchen und im Grunde die fileInput-Komponente finden, also habe ich versucht, diese Bibliothek zu verwenden um die Back-End-Formularseite auszufüllen. 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 die Konfiguration zu den wichtigsten Punkten im Code 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.

Zusammenfassung

Das Obige ist das vom Herausgeber eingeführte Tutorial zur Verwendung der yii2-Komponente zum Hochladen mehrerer Bilder. Ich hoffe, es wird hilfreich sein An alle: Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für Ihre Unterstützung der Script House-Website bedanken!

Artikel, die Sie interessieren könnten:

PHP-Implementierung des Benutzer-Login-Fallcodes PHP-Beispiel

ThinkPHP-Methoden-Beispielanalyse zur Verhinderung der wiederholten Übermittlung von Formularen. PHP-Beispiel

Analyse der PHP-Paging-Anzeigemethode [Anbei finden Sie PHP-Kenntnisse für allgemeine PHP-Paging-Klassen

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