Tutorial zur Verwendung der yii2-Komponente zum Hochladen mehrerer Bilder

Dieser Artikel stellt hauptsächlich das Tutorial zur Verwendung der yii2-Multi-Image-Upload-Komponente vor. Es hat einen gewissen Referenzwert. Jetzt kann ich es mit allen teilen, die es benötigen Ich habe yii2 zum Entwickeln einer Seite verwendet und musste mehrere Bilder hochladen. Ich habe in diesem Bereich nach Komponenten gesucht und im Grunde die Amway-FileInput-Komponente gefunden, also habe ich versucht, diese Bibliothek zu verwenden, um das Multi-Image zu vervollständigen Upload-Funktion der Backend-Formularseite. 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.

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung der yii2-Komponente zum Hochladen mehrerer Bilder. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!