Rumah >hujung hadapan web >Tutorial H5 >Cara menggunakan teg borang HTML5 untuk membebaskan pengesahan borang, menambah muat naik fail dan menyepadukan kemahiran tutorial seret dan lepas_html5

Cara menggunakan teg borang HTML5 untuk membebaskan pengesahan borang, menambah muat naik fail dan menyepadukan kemahiran tutorial seret dan lepas_html5

WBOYasal: 2016-05-16 15:49:291730semak imbas

Perkara yang berkaitan dengan borang dalam HTML

Atribut baharu	Pemahaman peribadi
borang	Sebelum HTML5, elemen bawahan dalam borang perlu diletakkan dalam teg Kini anda boleh menentukan teg borang untuk teg Ulasan: Fungsi ini menyelesaikan beberapa masalah yang kami hadapi dalam amalan Contohnya, apabila iframe mensimulasikan muat naik imej tak segerak, imej mesti ditulis di luar borang.
formasi kaedah bentuk	Atribut ini digunakan untuk butang (serahkan) untuk menjadikan halaman penyerahan borang boleh dikawal oleh butang kaedah borang menentukan kaedah penyerahan setiap butang
tempat letak	Atribut ini sangat berguna untuk memaparkan maklumat segera dalam kotak teks Atribut yang sangat berguna
senarai	Atribut senarai perlu digunakan bersama-sama dengan senarai data, yang bersamaan dengan kotak teks dan mensimulasikan pilih. Ia adalah atribut yang sangat sesuai
autofokus	Digunakan untuk kotak teks untuk mendapatkan fokus secara aktif, bahan berguna
Tambahkan atribut input pada pengesahan percuma, yang tidak disokong oleh pelbagai penyemak imbas
tel	Untuk panggilan telefon
url	URL pengesahan
e-mel	Sahkan e-mel
tarikh/masa	Pengesahan jenis tarikh, pemalam pemilihan tarikh akan muncul. . .
nombor	hanya boleh menjadi nombor
julat	Julat nombor kawalan
warna	Pemilih warna, perkara yang hebat. . .

HTML5 telah menambahkan banyak atribut yang berkaitan dengan bentuk Sejujurnya, perkara ini benar-benar bertimbang rasa. ! ! Untuk sebahagian besar:

Bebaskan sepenuhnya pengesahan borang

Jika anda tidak mempertimbangkan isu keserasian, saya tidak sabar-sabar untuk menyertai serta-merta, tetapi sebaik sahaja anda memikirkan tentang isu keserasian, anda akan mengalami sakit kepala yang teruk! ! !

Kerana sesuatu yang asalnya bagus akan menambah beban kerja kita atas sebab sejarah! ! !

Melakukan perkara yang betul pada masa yang salah, dia kelihatan betul dan sebenarnya betul. . . Tetapi anda akan mendapati bahawa dia salah. . . .

Tingkatkan elemen halaman

项目	个人理解
figure/figcaption	据说表示页面独立内容，移除后无影响，暂无发现用处..
details	该标签有点意思，用于替代js中，元素收起展开功能。最新ff都不支持……个人觉得，既然提供了该标签应该提供属性表示上下展开或者左右展开；
mark	高亮显示，当真语义化
progress	屌丝们，可以告别gif图片了，也不用div模拟百分比了，与windows区域一致的进度条出现啦，异步文件上传更加完善！
改良ol	老夫就没有用过这个主。。。
……

Projek Pemahaman peribadi tokoh/figcaption Dikatakan bahawa ia mewakili kandungan bebas halaman itu tidak akan memberi kesan selepas dialih keluar.. butiran Teg ini agak menarik ia digunakan untuk menggantikan fungsi runtuh dan pengembangan dalam js. FF terbaharu tidak menyokongnya... Secara peribadi, memandangkan tag ini disediakan, atribut harus disediakan untuk menunjukkan pengembangan atas dan bawah atau kiri dan kanan tanda Diserlahkan, benar-benar semantik kemajuan Berlian, anda boleh mengucapkan selamat tinggal kepada imej gif, dan tidak perlu menggunakan div untuk mensimulasikan peratusan Bar kemajuan yang konsisten dengan kawasan tingkap muncul, dan muat naik fail tak segerak adalah lebih sempurna! Diperbaiki Saya tidak pernah menggunakan tuan ini. . . ……

Elemen di atas adalah elemen yang boleh diketepikan dan tidak perlu pergi ke butiran Seterusnya, bintang artikel ini akan muncul:

API Fail

Senarai Fail dan objek fail:

Dalam HTML4, teg fail hanya membenarkan anda memilih satu fail, tetapi dalam HTML5, selepas menetapkan berbilang atribut pada teg fail, anda boleh memilih berbilang fail! ! !

Selepas pemilihan, objek senarai fail di sini akan terbentuk, iaitu senarai objek yang terdiri daripada fail Ringkasnya, ia adalah tatasusunan fail.

Objek fail mempunyai 2 atribut, nama mewakili nama fail (tidak termasuk laluan) dan lastModifiedDate mewakili masa pengubahsuaian terakhir

Malah, apabila kami mengendalikan fail dalam HTML4, kami boleh memperoleh banyak atribut tempatan, seperti saiz fail, tetapi IE jahat tidak menyokongnya, dan ia bertambah baik selepas IE9.

Jadi jika pelanggan menggesa anda memuat naik fail yang terlalu besar, sila berputus asa. . .

Objek Gumpalan

mewakili data mentah binari dan menyediakan kaedah hirisan untuk mengakses data mentah dalaman bait mewakili panjang bait objek gumpalan, jenis mewakili jenis mimenya dan jika jenisnya tidak diketahui, rentetan kosong dikembalikan.

Ayuh, lakukan percubaan mudah:

Salin kod

Kodnya adalah seperti berikut:

Mengenai Fail

</title> ; <script src="../jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $ (dokumen).sedia(fungsi () { $('#wl').klik(fungsi () { var f = $('#file')[0]; var s = ''; }); }); </skrip> </kepala> <badan> <input type="file" id="file" berbilang /> <button id="wl"> Muat naik fail</button> </body> < /html> </div> Selepas kami memilih gambar dalam ff, serahkannya, tetapkan titik putus dan lihat: <img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535523.jpg"> Protagonis fail muncul, dia, mari keluarkan atributnya untuk melihat: <img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535524.jpg"> Ia benar-benar mempunyai segala-galanya! Walau bagaimanapun, banyak yang boleh anda lakukan dengan hartanah ini. . . Mari lihat ie7 dan 8: <img alt="" src="http://files.jb51.net/file_images/article/201304/2013042415535525.jpg"> Penonton yang dihormati, saya langsung tidak mempunyai atribut ini, jadi semuanya serba boleh. . . Sebenarnya, saya rasa amat menyakitkan untuk menyahpepijat pelayar IE Adakah anda mempunyai pemalam pembangunan IE yang baik, seperti pepijat api ff atau pemalam Google sendiri? ? Antara muka FIleReader Antara muka pembaca fail boleh membaca fail ke dalam memori Dengan ini, kita boleh pratonton gambar dengan selesa, tetapi kegunaannya melebihi itu. Empat kaedah pembaca fail: readAsBinaryString membaca fail sebagai kod binari - biasanya kami menghantar data ke bahagian belakang; readAsText membaca fail sebagai teks - baca kandungan teks readAsURL membaca fail sebagai DataURL - biasanya fail kecil, imej atau html batalkan gangguan membaca, kerana fail terlalu besar dan masa menunggu sangat lama acara antara muka pembaca fail: abort baca cetusan gangguan; ralat tercetus apabila bacaan gagal onloadstart mencetuskan apabila bacaan dimulakan sedang berjalan sedang dimuatkan onload dicetuskan apabila bacaan berjaya onloadend dicetuskan selepas bacaan selesai, tanpa mengira kejayaan atau kegagalan; Bercakap tanpa latihan tidak mencukupi, mari kita buat sedikit percubaan di sini: <div class="msgheader">Salin kod<div class="right">Kodnya ialah seperti berikut:<div class="msgborder" id="phpcode5"> Saya adalah percubaan kecil <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ;/title> <script src="../jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript "> $(document).ready(function () { var bt = $('#wl'); var file = $('#file'); var type = $('#type'); var result = $('#result'); var func = {}; func.readAsDataURL = function (fail) { //Sahkan sama ada ia adalah imej jika (!/image/w /.test(file.type)) { alert('non-image format'); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { result.html('<img src="' this .result ' "/>'); } } func.readAsBinaryString = fungsi (fail) { var reader = new FileReader(); reader.readAsBinaryString (fail); reader.onload = fungsi (e) { result.html(this.result); } } func.readAsText = fungsi (fail) { var reader = new FileReader(); reader.readAsText(file); reader.onload = fungsi (e) { result.html(this.result ); } } bt.click(function () { if (func[type.val()] && typeof func[type.val()] == ' function') { func[type.val()](fail[0].fail[0]); } }); }); < ;/script> ; </head> <body> <div id="result"> </div> <input type="file " id= "file" berbilang /> <select id="type"> <option value="readAsDataURL">readAsDataURL</option> <option value=" readAsBinaryString"> ;readAsBinaryString</option> <option value="readAsText">readAsText</option> </select> <wlbutt< > Baca Fail</button> </body> </html> Gunakan pelayar terbaharu untuk mencubanya! Mari kita buat penghakiman lain dan lihat susunan pelaksanaan acara: reader.onload = function (e) { alert ('onprogress'); reader.onerror = reader.onloadstart = function (e) {<sh> alert ('onloadStart'); > Aplikasi khusus di sini: Salin kod</sh> Kod tersebut adalah seperti berikut: <div class="msgborder" id="phpcode6"> 简单图片上传 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>

< ;/html>

🎜

1 拖放可使用Pemindahan Data传递数据，该对象是非常有用的，因为在拖动目标元素时，元素时，元素，我们可以用此传递信息；

API：

mulakan seret 被拖放元素

开始拖放时

seret 被拖放元素

拖放过程中

dragenter 拖放过程中鼠标经过的元素

被拖放元素开始进入本元素时dragover 拖放过程中鼠标经过的元素本元素内移动

drageleave 拖放过程中鼠标经过的元素离开本元素

jatuhkan 拖放的目标元素拖动的元素放到了本元素中

dragend 拖放的对象拖放结束其实这里是有问题的，我并未去深入研究从开始拖动到经过各种元素会照元素会了可以作为二次学习时的重点研究对象。

结语

html5的文件和表单做的比较精致，个人感觉比布局新增的几个标签有用多了，个人感觉比布局新增的几个标签有用多了，明多了，明多了，明天了，明天了，明天了，明天了，明天庆不懂，虽然见过，但是还是感觉很厉害的样子！

Cara menggunakan teg borang HTML5 untuk membebaskan pengesahan borang, menambah muat naik fail dan menyepadukan kemahiran tutorial seret dan lepas_html5

Perkara yang berkaitan dengan borang dalam HTML

Tingkatkan elemen halaman

API Fail

Artikel berkaitan