Bagaimana saya menggunakan komponen muat naik LAYUI untuk memuat naik fail?

Menggunakan komponen muat naik LAYUI untuk memuat naik fail

Komponen muat naik Layui memudahkan muat naik fail dalam aplikasi web anda. Ia memanfaatkan Ajax di belakang tabir, menjadikan proses itu lancar untuk pengguna. Untuk menggunakannya, anda perlu memasukkan fail LAYUI CSS dan JavaScript di HTML anda. Kemudian, anda perlu menentukan elemen muat naik dalam HTML anda, menggunakan struktur dan atribut tertentu. Struktur ini biasanya merangkumi elemen <input> file jenis yang tersembunyi di dalam div kontena yang akan bergaya dan berinteraksi dengan. Akhirnya, anda memulakan komponen muat naik dengan panggilan JavaScript, menentukan pilihan untuk mengawal tingkah lakunya.

Inilah contoh asas:

 <code class="html"><div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="test1">选择文件</button> <div class="layui-upload-list"> <ul id="demo1"></ul> </div> </div> <script> layui.use(&#39;upload&#39;, function(){ var upload = layui.upload; //执行实例var uploadInst = upload.render({ elem: &#39;#test1&#39; //绑定元素,url: &#39;/upload/&#39; //上传接口,done: function(res){ //上传完毕回调console.log(res); } ,error: function(){ //请求异常回调console.log("Upload failed!"); } }); }); </script></code>

Coretan kod ini menunjukkan butang muat naik asas. Parameter url menunjukkan skrip muat naik sisi pelayan anda. Fungsi panggilan balik done mengendalikan muat naik yang berjaya, sementara error mengendalikan kegagalan. Ingatlah untuk menggantikan /upload/ dengan URL sebenar pengendali muat naik anda.

Konfigurasi biasa untuk komponen muat naik LAYUI

Komponen muat naik Layui menawarkan beberapa pilihan yang boleh dikonfigurasikan untuk menyesuaikan kelakuannya dengan keperluan khusus anda. Pilihan ini diluluskan sebagai objek JavaScript ke fungsi upload.render() . Beberapa konfigurasi yang paling biasa termasuk:

• elem : Ini adalah parameter yang diperlukan yang menentukan elemen HTML yang mana komponen muat naik akan terikat (contohnya, butang atau div).
• url : Ini adalah URL skrip sisi pelayan anda yang mengendalikan muat naik fail. Ini juga merupakan parameter yang diperlukan.
• accept : Parameter ini menentukan jenis fail yang dibenarkan (misalnya, image/* , .pdf , .txt ). Ini membantu menyekat jenis pengguna fail yang boleh dimuat naik.
• multiple : Menetapkan ini ke true membolehkan pengguna memilih pelbagai fail untuk dimuat naik.
• auto : Menetapkan ini kepada false menghalang muat naik dari bermula secara automatik selepas pemilihan fail. Ini berguna jika anda ingin menambah pengesahan tambahan atau interaksi pengguna sebelum memulakan muat naik.
• exts : Menentukan sambungan fail yang dibenarkan (misalnya, ['jpg', 'png', 'gif'] ). Ini adalah alternatif untuk accept .
• size : Menentukan saiz fail maksimum yang dibenarkan dalam kb.
• number : Hadkan bilangan fail yang boleh dipilih oleh pengguna.

Ini hanya beberapa pilihan yang tersedia; Rujuk kepada dokumentasi LAYUI rasmi untuk senarai lengkap.

Mengendalikan kemajuan dan kesilapan memuat naik dengan komponen muat naik LAYUI

Komponen muat naik Layui tidak secara langsung menyediakan peristiwa kemajuan dengan cara yang sama beberapa perpustakaan lain lakukan. Walau bagaimanapun, anda boleh mencapai pemantauan kemajuan dengan melaksanakannya dalam pengendali muat naik pelayan anda. Skrip sisi pelayan anda secara berkala menghantar kemas kini kemajuan secara berkala kepada pelanggan. Anda kemudian boleh menggunakan kemas kini ini untuk memaparkan bar kemajuan atau maklum balas lain kepada pengguna. Layui sendiri mengendalikan kesilapan yang dilaporkan oleh pelayan; Anda mengendalikan kesilapan ini menggunakan fungsi panggil balik error dalam upload.render() . Fungsi ini menerima objek ralat sebagai hujah, yang boleh anda gunakan untuk menyahpepijat atau memaparkan mesej ralat mesra pengguna.

Sebagai contoh, pelaksanaan yang lebih maju mungkin termasuk:

 <code class="javascript">layui.use('upload', function(){ var upload = layui.upload; upload.render({ elem: '#test1' ,url: '/upload/' ,before: function(obj){ //obj参数包含的信息，跟选择的图片信息有关layer.load(); //上传loading } ,done: function(res, index, upload){ if(res.code == 0){ //上传成功layer.msg('上传成功'); } else { layer.msg('上传失败'); } layer.closeAll('loading'); //关闭loading } ,error: function(index, upload){ layer.msg('上传失败'); layer.closeAll('loading'); } }); });</code>

Contoh ini menggunakan lapisan (satu lagi modul LAYUI) untuk memaparkan mesej pemuatan dan kejayaan/kegagalan.

Menyesuaikan penampilan komponen muat naik LAYUI

Komponen muat naik Layui menggunakan kelas CSS sendiri, menjadikan penyesuaian agak mudah. Anda boleh mengatasi gaya lalai menggunakan peraturan CSS anda sendiri. Sasarkan kelas LoSS Lointi spesifik yang dikaitkan dengan elemen komponen muat naik (misalnya, .layui-upload , .layui-upload-list , .layui-upload-btn ). Anda juga boleh menyesuaikan penampilan butang dengan menggunakan kelas CSS tersuai atau gaya inline ke elemen butang dalam HTML anda. Ingatlah untuk mengekalkan struktur yang sedia ada untuk mengelakkan melanggar fungsi komponen. Untuk penyesuaian yang lebih luas, anda mungkin perlu mengubah suai kod sumber LAYUI itu sendiri, yang pada umumnya tidak disyorkan melainkan jika anda sudah biasa dengan struktur perpustakaan. Walau bagaimanapun, menggunakan CSS tersuai biasanya mencukupi untuk penyesuaian visual yang paling banyak.

Atas ialah kandungan terperinci Bagaimana saya menggunakan komponen muat naik LAYUI untuk memuat naik fail?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!