Rumah hujung hadapan web tutorial js AjaxFileUpload怎么动态的添加文件上传框

AjaxFileUpload怎么动态的添加文件上传框

Mar 31, 2018 am 09:33 AM
ajaxfileupload dokumen Tambah ke

这次给大家带来AjaxFileUpload怎么动态的添加文件上传框,AjaxFileUpload动态添加文件上传框的注意事项有哪些,下面就是实战案例,一起来看一下。

但只是固定的文件个数,如果需求不确定是多少文件 则我们就需要动态的添加文件上传框,以实现灵活性。

基于上篇基本框架是不变的,主要修改以下几个方面

1、jQuery实现动态添加删除文件上传框

2、获取文件上传框的ID

3、ajaxfileupload.js里将ID数组转换为需要的Object数组

依次解决上面问题

一、实现动态添加删除文件上传框

<body> 
 <form action="" enctype="multipart/form-data"> 
 <h2> 
  多文件上传 
 </h2> 
 <input type="file" id="file1" name="file" /><a id="add" href="javascript:void();" rel="external nofollow" onclick="addFile();">添加</a> 
 <span> 
  <table id="down"> 
  </table> 
 </span> 
 </br> 
 <input type="button" onclick="fileUpload();" value="上传"> 
 </form> 
</body>
Salin selepas log masuk
<script type="text/javascript"> 
 //添加附件 
 function addFile(){ 
 var fileLength = $("input[name=file]").length+1; 
 var inputFile = "<p id=&#39;addFile"+fileLength+"&#39;><input type=&#39;file&#39; id=&#39;file"+fileLength+"&#39; name=&#39;file&#39; />" 
   +"<a href=&#39;javascript:void();&#39; onclick=&#39;delFile("+fileLength+");&#39;>删除</a></p>"; 
 $("#add").after(inputFile); 
 } 
 //删除附件 
 function delFile(id){ 
 $("#addFile"+id).remove(); 
 } 
</script>
Salin selepas log masuk

二、获取文件上传框的ID

由于我们不知道有多少个上传框,每次添加一个上传框,其id属性都是以file1,file2方式递增的

可以用each循环拼接字符

var files = ""; 
//获取所有 <input type="file" id="file1" name="file" /> 的ID属性值 
$("input[name=file]").each(function(){ 
 files = files + $(this).attr("id")+","; 
}) 
//将字符最后一逗号(,)截取掉 
files = files.substring(0,files.length-1);
Salin selepas log masuk

然后我们获取的files值 如:var files = "file1,file2,file3";

可以使用console.info(typeof(files));查看files为string类型

三、ajaxfileupload.js里将ID数组转换为需要的Object数组

因为我们需要的是诸如var files = ['file1','file2','file3'];

而不是var files = "file1,file2,file3";

所以需要进行转换,其实也未必非得在ajaxfileupload.js里进行操作

完全可以在获取ID时转换好 再传值过来。也无所谓在哪里了,方法都一样。

还是找到以下代码:

var oldElement = jQuery('#' + fileElementId); 
var newElement = jQuery(oldElement).clone(); 
jQuery(oldElement).attr('id', fileId); 
jQuery(oldElement).before(newElement); 
jQuery(oldElement).appendTo(form);
Salin selepas log masuk

在这段代码之上添加如下:

var t = ''; 
if(typeof(fileElementId) == 'string'){ 
/* 
 * 将传过来的值 如:"file1,file2,file3" 转换为:['file1','file2','file3'] 
 */ 
var s = fileElementId.split(","); 
for(var i in s){ 
 t = t + "'"+s[i]+"'"+","; 
} 
t = "["+t+"]"; 
t = t.replace(",]", "]") 
} 
fileElementId= eval('('+ t +')'); //将string类型转换为Object类型
Salin selepas log masuk

效果如图:

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Ajax和jsonp在项目中的实战总结

怎么用AjaxFileUpload实现多文件上传

Atas ialah kandungan terperinci AjaxFileUpload怎么动态的添加文件上传框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
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

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

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memulihkan fail WeChat yang telah tamat tempoh Bolehkah fail WeChat yang telah tamat tempoh dipulihkan? Bagaimana untuk memulihkan fail WeChat yang telah tamat tempoh Bolehkah fail WeChat yang telah tamat tempoh dipulihkan? Feb 22, 2024 pm 02:46 PM

Buka WeChat, pilih Tetapan dalam Saya, pilih Umum dan kemudian pilih Ruang Storan, pilih Pengurusan dalam Ruang Storan, pilih perbualan di mana anda ingin memulihkan fail dan pilih ikon tanda seru. Tutorial Model Berkenaan: iPhone13 Sistem: iOS15.3 Versi: WeChat 8.0.24 Analisis 1 Mula-mula buka WeChat dan klik pilihan Tetapan pada halaman Saya. 2 Kemudian cari dan klik Pilihan Umum pada halaman tetapan. 3Kemudian klik Ruang Storan pada halaman umum. 4 Seterusnya, klik Urus pada halaman ruang storan. 5Akhir sekali, pilih perbualan di mana anda ingin memulihkan fail dan klik ikon tanda seru di sebelah kanan. Tambahan: Fail WeChat biasanya tamat tempoh dalam beberapa hari Jika fail yang diterima oleh WeChat belum diklik, sistem WeChat akan mengosongkannya selepas 72 jam Jika fail WeChat telah dilihat.

Foto tidak boleh membuka fail ini kerana format tidak disokong atau fail rosak Foto tidak boleh membuka fail ini kerana format tidak disokong atau fail rosak Feb 22, 2024 am 09:49 AM

Di Windows, apl Photos ialah cara yang mudah untuk melihat dan mengurus foto dan video. Melalui aplikasi ini, pengguna boleh mengakses fail multimedia mereka dengan mudah tanpa memasang perisian tambahan. Walau bagaimanapun, kadangkala pengguna mungkin menghadapi beberapa masalah, seperti menghadapi mesej ralat "Fail ini tidak boleh dibuka kerana format tidak disokong" semasa menggunakan apl Foto atau kerosakan fail semasa cuba membuka foto atau video. Keadaan ini boleh mengelirukan dan menyusahkan pengguna, memerlukan beberapa penyiasatan dan pembetulan untuk menyelesaikan isu tersebut. Pengguna melihat ralat berikut apabila mereka cuba membuka foto atau video pada apl Foto. Maaf, Foto tidak boleh membuka fail ini kerana format tidak disokong atau fail pada masa ini

Bolehkah fail format Tmp dipadamkan? Bolehkah fail format Tmp dipadamkan? Feb 24, 2024 pm 04:33 PM

Fail format Tmp ialah format fail sementara yang biasanya dihasilkan oleh sistem atau program komputer semasa pelaksanaan. Tujuan fail ini adalah untuk menyimpan data sementara untuk membantu program berjalan dengan betul atau meningkatkan prestasi. Sebaik sahaja pelaksanaan program selesai atau komputer dimulakan semula, fail tmp ini selalunya tidak diperlukan lagi. Oleh itu, untuk fail format Tmp, ia pada asasnya boleh dipadam. Selain itu, pemadaman fail tmp ini boleh mengosongkan ruang cakera keras dan memastikan operasi normal komputer. Walau bagaimanapun, sebelum memadam fail format Tmp, kita perlu

Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005. Apa yang perlu dilakukan jika kod ralat 0x80004005 muncul Editor akan mengajar anda cara menyelesaikan kod ralat 0x80004005. Mar 21, 2024 pm 09:17 PM

Apabila memadam atau menyahmampat folder pada komputer anda, kadangkala kotak dialog segera "Ralat 0x80004005: Ralat Tidak Ditentukan" akan muncul Bagaimana anda harus menyelesaikan situasi ini? Sebenarnya terdapat banyak sebab mengapa kod ralat 0x80004005 digesa, tetapi kebanyakannya disebabkan oleh virus. Kami boleh mendaftarkan semula dll untuk menyelesaikan masalah tersebut . Sesetengah pengguna digesa dengan kod ralat 0X80004005 apabila menggunakan komputer mereka Ralat 0x80004005 disebabkan terutamanya oleh komputer tidak mendaftarkan fail perpustakaan pautan dinamik tertentu dengan betul, atau oleh tembok api yang tidak membenarkan sambungan HTTPS antara komputer dan Internet. Jadi bagaimana pula

Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu? Bagaimana untuk memindahkan fail dari Cakera Awan Quark ke Cakera Awan Baidu? Mar 14, 2024 pm 02:07 PM

Quark Netdisk dan Baidu Netdisk pada masa ini merupakan perisian Netdisk yang paling biasa digunakan untuk menyimpan fail Jika anda ingin menyimpan fail dalam Quark Netdisk ke Baidu Netdisk, bagaimana anda melakukannya? Dalam isu ini, editor telah menyusun langkah tutorial untuk memindahkan fail dari komputer Quark Network Disk ke Baidu Network Disk Mari kita lihat cara mengendalikannya. Bagaimana untuk menyimpan fail dari Cakera Rangkaian Quark ke Cakera Rangkaian Baidu? Untuk memindahkan fail daripada Cakera Rangkaian Quark ke Cakera Rangkaian Baidu, anda perlu memuat turun fail yang diperlukan terlebih dahulu daripada Cakera Rangkaian Quark, kemudian pilih folder sasaran dalam klien Cakera Rangkaian Baidu dan bukanya. Kemudian, seret dan lepaskan fail yang dimuat turun daripada Cakera Awan Quark ke dalam folder yang dibuka oleh klien Cakera Awan Baidu, atau gunakan fungsi muat naik untuk menambah fail pada Cakera Awan Baidu. Pastikan anda menyemak sama ada fail telah berjaya dipindahkan dalam Cakera Awan Baidu selepas muat naik selesai. Itu sahaja

Bagaimana untuk menambah TV pada Mijia Bagaimana untuk menambah TV pada Mijia Mar 25, 2024 pm 05:00 PM

Ramai pengguna semakin memihak kepada ekosistem elektronik sambung rumah pintar Xiaomi dalam kehidupan moden Selepas menyambung ke APP Mijia, anda boleh mengawal peranti yang disambungkan dengan mudah dengan telefon bimbit anda Namun, ramai pengguna masih tidak tahu cara menambah Mijia rumah mereka, maka panduan tutorial ini akan membawakan kepada anda kaedah dan langkah sambungan khusus, dengan harapan dapat membantu semua orang yang memerlukan. 1. Selepas memuat turun APP Mijia, buat atau log masuk ke akaun Xiaomi. 2. Kaedah menambah: Selepas peranti baharu dihidupkan, dekatkan telefon dengan peranti dan hidupkan TV Xiaomi Dalam keadaan biasa, gesaan sambungan akan muncul. Jika tiada gesaan muncul, anda juga boleh menambah peranti secara manual Kaedahnya ialah: selepas memasuki APP rumah pintar, klik butang pertama di sebelah kiri bawah

Penggunaan garis miring dan garis miring belakang yang berbeza dalam laluan fail Penggunaan garis miring dan garis miring belakang yang berbeza dalam laluan fail Feb 26, 2024 pm 04:36 PM

Laluan fail ialah rentetan yang digunakan oleh sistem pengendalian untuk mengenal pasti dan mencari fail atau folder. Dalam laluan fail, terdapat dua simbol biasa yang memisahkan laluan, iaitu garis miring ke hadapan (/) dan garis miring ke belakang (). Kedua-dua simbol ini mempunyai kegunaan dan makna yang berbeza dalam sistem pengendalian yang berbeza. Garis miring ke hadapan (/) ialah pemisah laluan yang biasa digunakan dalam sistem Unix dan Linux. Pada sistem ini, laluan fail bermula dari direktori akar (/) dan dipisahkan oleh garis miring ke hadapan antara setiap direktori. Sebagai contoh, laluan /home/user/Docume

Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan? Mar 15, 2024 am 09:49 AM

Baru-baru ini, ramai netizen bertanya kepada editor, apakah itu fail hiberfil.sys? Bolehkah hiberfil.sys mengambil banyak ruang pemacu C dan dipadamkan? Editor boleh memberitahu anda bahawa fail hiberfil.sys boleh dipadamkan. Mari kita lihat butiran di bawah. hiberfil.sys ialah fail tersembunyi dalam sistem Windows dan juga fail hibernasi sistem. Ia biasanya disimpan dalam direktori akar pemacu C, dan saiznya bersamaan dengan saiz memori yang dipasang sistem. Fail ini digunakan apabila komputer sedang hibernasi dan mengandungi data memori sistem semasa supaya ia boleh dipulihkan dengan cepat kepada keadaan sebelumnya semasa pemulihan. Oleh kerana saiznya adalah sama dengan kapasiti memori, ia mungkin mengambil jumlah ruang cakera keras yang lebih besar. hiber

See all articles