cari
Rumahpembangunan bahagian belakangtutorial phpyii2多图上传组件的使用

yii2多图上传组件的使用

May 10, 2018 am 09:34 AM
yii2muat naikguna

这篇文章主要介绍了关于yii2多图上传组件的使用,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

最近在使用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::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
]);

而这些都是常规操作,我们来设想一下,我们要完成淘宝的商品添加,有个商品表,有着一对多关系的若干张图片,这时候就需要用到多图上传功能了。而且我们还希望上传图片是异步的,那么我们可以这么配置我们的fileInput组件

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

我们在控制器配置好图片浏览的配置,传入进来。代码里的关键点我已经加上了配置,我们可以看到,这时异步上传的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 = [&#39;error&#39; => &#39;图片最大不可超过2M&#39;]; 
           return json_encode($res); 
         } 
         if (!in_array(strtolower($image->extension), array(&#39;gif&#39;, &#39;jpg&#39;, &#39;jpeg&#39;, &#39;png&#39;))) { 
           $res = [&#39;error&#39; => &#39;请上传标准图片文件, 支持gif,jpg,png和jpeg.&#39;]; 
           return json_encode($res); 
         } 
         $dir = &#39;/uploads/temp/&#39;; 
         //生成唯一uuid用来保存到服务器上图片名称 
         $pickey = ToolExtend::genuuid(); 
         $filename = $pickey . &#39;.&#39; . $image->getExtension();
         //如果文件夹不存在,则新建文件夹 
         if (!file_exists(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir)) { 
           FileHelper::createDirectory(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir, 777); 
         } 
         $filepath = realpath(Yii::getAlias(&#39;@backend&#39;) . &#39;/web&#39; . $dir) . &#39;/&#39;; 
         $file = $filepath . $filename; 
         if ($image->saveAs($file)) { 
           $imgpath = $dir . $filename; 
           /*Image::thumbnail($file, 100, 100) 
             ->save($file . &#39;_100x100.jpg&#39;, [&#39;quality&#39; => 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); 
   } 
 }

到此,多图上传的工作我们也就完美的实现了。

为了实现图片的删除效果,这里可以先上传两张图片。你可以单张上传也可以多张上传。

上传成功后你可以刷新当前页面,因为一开始我们就在controller中实现了图片的预览工作,所以理应会展示我们已经上传的两张图片。

至于删除函数就不讲了,只要在浏览里配置上删除的url,也是一样的操作咯。

相关推荐:

Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片

Atas ialah kandungan terperinci yii2多图上传组件的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Bagaimanakah anda dapat mencegah serangan penetapan sesi?Bagaimanakah anda dapat mencegah serangan penetapan sesi?Apr 28, 2025 am 12:25 AM

Kaedah yang berkesan untuk mengelakkan serangan tetap sesi termasuk: 1. Meningkatkan semula ID Sesi selepas log pengguna masuk; 2. Gunakan algoritma penjanaan ID sesi yang selamat; 3. Melaksanakan mekanisme masa tamat sesi; 4. Menyulitkan data sesi menggunakan HTTPS. Langkah -langkah ini dapat memastikan bahawa aplikasi itu tidak dapat dihancurkan apabila menghadapi serangan tetap sesi.

Bagaimana anda melaksanakan pengesahan tanpa sesi?Bagaimana anda melaksanakan pengesahan tanpa sesi?Apr 28, 2025 am 12:24 AM

Melaksanakan pengesahan bebas sesi boleh dicapai dengan menggunakan JSONWEBTOKENS (JWT), sistem pengesahan berasaskan token di mana semua maklumat yang diperlukan disimpan dalam token tanpa penyimpanan sesi pelayan. 1) Gunakan JWT untuk menjana dan mengesahkan token, 2) memastikan bahawa HTTPS digunakan untuk mengelakkan token daripada dipintas, 3) menyimpan token dengan selamat di sisi klien, 4) mengesahkan token di sisi pelayan untuk mengelakkan gangguan, 5) melaksanakan mekanisme pembatalan token.

Apakah beberapa risiko keselamatan biasa yang berkaitan dengan sesi PHP?Apakah beberapa risiko keselamatan biasa yang berkaitan dengan sesi PHP?Apr 28, 2025 am 12:24 AM

Risiko keselamatan sesi PHP terutamanya termasuk rampasan sesi, penetapan sesi, ramalan sesi dan keracunan sesi. 1. Sesi rampasan boleh dicegah dengan menggunakan HTTPS dan melindungi kuki. 2. Penetapan sesi boleh dielakkan dengan menanam semula ID sesi sebelum log pengguna masuk. 4. Keracunan sesi boleh dicegah dengan mengesahkan dan menapis data sesi.

Bagaimana anda memusnahkan sesi PHP?Bagaimana anda memusnahkan sesi PHP?Apr 28, 2025 am 12:16 AM

Untuk memusnahkan sesi PHP, anda perlu memulakan sesi terlebih dahulu, kemudian membersihkan data dan memusnahkan fail sesi. 1. Gunakan session_start () untuk memulakan sesi. 2. Gunakan session_unset () untuk membersihkan data sesi. 3. Akhirnya, gunakan session_destroy () untuk memusnahkan fail sesi untuk memastikan keselamatan data dan pelepasan sumber.

Bagaimanakah anda boleh menukar sesi simpan sesi lalai di php?Bagaimanakah anda boleh menukar sesi simpan sesi lalai di php?Apr 28, 2025 am 12:12 AM

Bagaimana cara menukar laluan penjimatan sesi lalai PHP? Ia boleh dicapai melalui langkah -langkah berikut: gunakan session_save_path ('/var/www/sesi'); session_start (); Dalam skrip PHP untuk menetapkan laluan penjimatan sesi. Tetapkan session.save_path = "/var/www/sesi" dalam fail php.ini untuk menukar laluan penjimatan sesi di seluruh dunia. Gunakan memcached atau redis untuk menyimpan data sesi, seperti ini_set ('session.save_handler', 'memcached'); ini_set (

Bagaimana anda mengubah suai data yang disimpan dalam sesi PHP?Bagaimana anda mengubah suai data yang disimpan dalam sesi PHP?Apr 27, 2025 am 12:23 AM

Tomodififydatainaphpsession, startTheSessionWithSsion_start (), thenuse $ _SessionToset, Modify, Orremovariables.1) startTheSession.2) setOrmodifySessionVariabelinging $ _Session.3) ReveVariablesWithunset ()

Berikan contoh menyimpan array dalam sesi PHP.Berikan contoh menyimpan array dalam sesi PHP.Apr 27, 2025 am 12:20 AM

Array boleh disimpan dalam sesi PHP. 1. Mulakan sesi dan gunakan session_start (). 2. Buat array dan simpan dalam $ _Session. 3. Dapatkan array melalui $ _Session. 4. Mengoptimumkan data sesi untuk meningkatkan prestasi.

Bagaimanakah pengumpulan sampah berfungsi untuk sesi PHP?Bagaimanakah pengumpulan sampah berfungsi untuk sesi PHP?Apr 27, 2025 am 12:19 AM

Pengumpulan sampah sesi PHP dicetuskan melalui mekanisme kebarangkalian untuk membersihkan data sesi yang telah tamat tempoh. 1) Tetapkan kebarangkalian pencetus dan kitaran hayat sesi dalam fail konfigurasi; 2) Anda boleh menggunakan tugas cron untuk mengoptimumkan aplikasi beban tinggi; 3) Anda perlu mengimbangi kekerapan dan prestasi pengumpulan sampah untuk mengelakkan kehilangan data.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Penyesuai Pelayan SAP NetWeaver untuk Eclipse

Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.