HTML5 Fail Drag, Drop, Analyze, Baca dan Muat naik

3Sudah seminggu yang sibuk. Kami telah menemui bagaimana API HTML5 baru dapat membantu kami membuka, membaca dan memuat naik fail yang pengguna diseret dan jatuh ke dalam tetingkap penyemak imbas. Artikel ini meringkaskan teknik dan tahap sokongan penyemak imbas semasa.

Takeaways Key

API HTML5 HTML5 boleh membantu membuka, membaca, dan memuat naik fail yang pengguna telah diseret dan jatuh ke dalam tetingkap penyemak imbas. Ciri ini disokong oleh versi terkini Chrome, Firefox, dan Opera, tetapi Opera hanya boleh menggunakannya melalui input fail standard.
Objek FileList HTML5 adalah koleksi objek fail seperti array, dan objek fileReader membolehkan anda membuka teks atau fail binari dalam JavaScript. Ini memungkinkan untuk memeriksa jenis dan saiz fail sebelum pemprosesan atau muat naik selanjutnya berlaku.
HTML5 membolehkan penciptaan bar kemajuan muat naik dengan melampirkan acara "kemajuan" ke objek XMLHTTPREQUEST2. Ciri ini, digabungkan dengan keupayaan untuk menyeret dan menjatuhkan fail, dapat meningkatkan kebolehgunaan aplikasi web.

HTML5 API Sokongan

Kod JavaScript anda perlu menyemak kewujudan objek fail, filelist dan fileReader sebelum melampirkan pengendali acara. Pada masa penulisan, ini disokong oleh versi terkini Chrome, Firefox dan Opera:

Walaupun Opera menyokong objek ini, mereka hanya boleh digunakan melalui input fail standard - tidak seret dan jatuh. Oleh itu, pemeriksaan selanjutnya diperlukan; Saya cadangkan menggunakan kaedah muat naik xmlhttprequest2, mis.

if (window.File && window.FileList && window.FileReader) { ... }

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

seret fail & drop

Semua pelayar (kecuali yang ada di iPhone dan iPad) menyokong jenis input fail yang memaparkan butang "Semak imbas" yang biasa. Atribut "berganda" telah diperkenalkan di HTML5 dan kami boleh melampirkan pengendali acara perubahan ke lapangan:

Chrome dan Firefox juga membolehkan pengguna menyeret satu atau lebih fail ke elemen yang dipilih. Anda boleh melampirkan pengendali acara termasuk "Dragover" dan "Dragleave" (untuk menukar gaya) dan "Drop" untuk mengesan fail yang diturunkan, mis.

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

mengambil objek filelist

Objek FileList HTML5 adalah koleksi objek fail seperti array. Bidang input fail mengembalikan filelist melalui harta fail (event.target.files). Fail yang dijatuhkan mengembalikan objek filelist melalui harta DataTransfer.Files Property (event.datatransfer.files). Oleh itu, kita boleh mendapatkan objek filelist menggunakan pengendali acara tunggal:

Adalah penting untuk membatalkan acara lalai. Ini menghalang penyemak imbas yang cuba memaparkan atau mengendalikan fail apabila ia jatuh ke dalam tetingkap.

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

Menganalisis objek fail

Koleksi filelist mengandungi beberapa objek fail. Tiga sifat fail berguna disediakan:

.Name: Nama fail (ia tidak termasuk maklumat laluan)
.type: Jenis mime, mis. Imej/JPEG, Teks/Plain, dan lain -lain
.size: saiz fail dalam bait.

Ada kemungkinan untuk memeriksa jenis dan saiz fail sebelum pemprosesan atau muat naik selanjutnya berlaku, mis.

if (window.File && window.FileList && window.FileReader) { ... }

Untuk maklumat lanjut, rujuk cara membuka fail yang diturunkan menggunakan HTML5 dan JavaScript.

Membuka fail menggunakan fileReader

Objek FileReader HTML5 membolehkan anda membuka teks atau fail binari dalam JavaScript. Seperti yang anda harapkan, kaedah readAsText () digunakan untuk mendapatkan semula kandungan teks, mis.

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

Begitu juga, kaedah ReadAsDataurl () mengambil data imej binari sebagai URL data yang dikodkan yang boleh diserahkan kepada atribut SRC imej atau elemen kanvas:

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

Untuk maklumat lanjut, rujuk cara membuka fail yang diturunkan menggunakan HTML5 dan JavaScript.

memuat naik fail menggunakan Ajax

Fail yang sesuai boleh dimuat naik ke pelayan anda semasa pengguna kekal di halaman. Ia hanya soal lulus objek fail ke kaedah hantar () xmlhttprequest2:

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

Perhatikan kami juga menghantar nama fail sebagai tajuk HTTP. Ini adalah pilihan, tetapi ia membolehkan kami mencipta semula fail menggunakan nama asalnya pada pelayan menggunakan bahasa seperti PHP:

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

Untuk maklumat lanjut, rujuk bagaimana untuk memuat naik fail secara asynchronously menggunakan HTML5 dan AJAX.

mencipta bar kemajuan muat naik

Kami juga boleh melampirkan acara "kemajuan" ke objek XMLHTTPREQUEST2:

// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {
	...
}

Pengendali menerima objek acara dengan .loaded (bilangan bait dipindahkan) dan .total (saiz fail) sifat. Oleh itu, kemajuan boleh dikira dan diserahkan kepada tag kemajuan HTML5 atau mana -mana elemen lain, mis.

if (file.type.indexOf("text") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		// get file content
		var text = e.target.result;
		...
    }
    reader.readAsText(file);
}

Untuk maklumat lanjut, rujuk bagaimana untuk membuat fail muat naik fail grafik bar dalam HTML5 dan JavaScript. Saya harap anda menikmati siri ini. Seret dan drop fail adalah ciri penting yang dapat mengubah kebolehgunaan aplikasi web. HTML5 akhirnya memudahkannya.

Soalan Lazim (Soalan Lazim) Mengenai Fail Html5 Drag, Drop, Baca, Analisis, dan Muat naik Bar Kemajuan

Bagaimana saya boleh melaksanakan ciri seret dan drop HTML5 dalam aplikasi web saya? Pertama, anda perlu membuat zon drop, yang merupakan kawasan di mana pengguna boleh menggugurkan fail mereka. Ini boleh menjadi elemen HTML, tetapi ia mesti mempunyai atribut 'draggable' yang ditetapkan untuk benar. Seterusnya, anda perlu menambah pendengar acara untuk acara 'Dragover' dan 'Drop'. Acara 'Dragover' dipecat apabila item yang diseret berada di atas zon drop, dan acara 'drop' dipecat apabila item itu dijatuhkan. Dalam acara pengendali untuk acara 'drop', anda boleh mengakses fail yang dijatuhkan melalui harta 'datatransfer.files' objek acara.

Apakah perbezaan antara 'datatransfer.files' dan 'datatransfer.items'? Harta 'DataTransfer.Files' adalah objek filelist yang mewakili fail yang diseret. Ini berguna apabila anda ingin mengendalikan fail yang dijatuhkan di sebelah pelayan. Sebaliknya, 'datatransfer.items' adalah objek DataTransferItemList yang mewakili semua data seret. Ini berguna apabila anda ingin mengendalikan pelbagai jenis data seret, bukan hanya fail. Harta 'DataTransfer.Files' hanya dihuni dalam acara 'drop'. Pastikan anda mengaksesnya dalam pengendali acara yang betul.

Bagaimana saya boleh membaca kandungan fail yang dijatuhkan? Pertama, anda perlu membuat objek FileReader baru. Kemudian, anda boleh menggunakan kaedah 'Readastext' atau 'ReadasDataurl' untuk membaca kandungan fail. Kaedah 'readastext' membaca fail sebagai rentetan teks, dan kaedah 'readasdataurl' membaca fail sebagai url data. Acara 'kemajuan' dipecat secara berkala apabila muat naik berlangsung. Dalam pengendali acara, anda boleh mengira peratusan kemajuan dan mengemas kini bar kemajuan dengan sewajarnya. Pastikan untuk menetapkan sifat 'muat naik' objek XMLHTTPREQUEST kepada Benar untuk membolehkan acara 'Kemajuan'. Setiap item dalam objek filelist adalah objek fail yang mewakili fail yang dijatuhkan. Anda boleh mengendalikan setiap fail secara individu, sebagai contoh, dengan membaca kandungannya atau memuat naiknya ke pelayan. Harta 'jenis' adalah rentetan yang mewakili jenis mime fail. Jika jenis fail tidak dibenarkan, anda boleh menghalang tindakan drop dengan memanggil kaedah 'pencegahan' objek acara dalam pengendali acara 'drop'.

Bagaimana saya boleh mengendalikan seretan dan menjatuhkan acara untuk elemen bersarang?

Mengendalikan seretan dan drop acara untuk unsur -unsur bersarang boleh menjadi rumit kerana peristiwa -peristiwa gelembung ke atas pokok dom. Untuk mengelakkan elemen induk daripada menerima peristiwa seretan dan drop yang dimaksudkan untuk elemen kanak -kanak, anda boleh memanggil kaedah 'stoppropagation' objek acara dalam pengendali acara elemen kanak -kanak. dalam pengendali acara 'Dragleave' dan 'Drop'. Anda boleh menentukan penampilan kelas dalam CSS anda. Walau bagaimanapun, beberapa perpustakaan ujian, seperti selenium, menyediakan kaedah untuk mensimulasikan tindakan seret dan drop. Anda juga boleh membuat acara 'drop' mock dan menghantarnya ke elemen zon drop.

Atas ialah kandungan terperinci HTML5 Fail Drag, Drop, Analyze, Baca dan Muat naik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!