Cara Membuka Fail Diturunkan Menggunakan HTML5

3Dalam catatan terakhir saya, Cara Menggunakan Fail HTML5 Drag & Drop , kami dapati cara menggunakan API fail HTML5, melaksanakan acara seret dan drop, dan mengambil maklumat fail. Hari ini, kami akan cuba memuatkan fail pada pelanggan menggunakan JavaScript.

Mengapa membuka fail tempatan di JavaScript?

Memuat naik fail dari borang HTML adalah kikuk. Orang sering menggunakannya semasa memindahkan gambar multi-megabait dari kamera mereka ke pelayan web. Dengan mengandaikan mereka mencari fail, muat naik boleh mengambil masa beberapa minit hanya untuk mendapati ia adalah gambar yang salah, format yang tidak disokong, atau saiz fail yang lebih besar daripada yang dibenarkan. Sehingga kini, pemaju terpaksa bergantung kepada Flash atau plugin lain untuk memberikan pengalaman pengguna yang lebih baik. Pra-pemprosesan di JavaScript menawarkan beberapa faedah:

• pemprosesan fail tempatan pantas.
• Fail boleh dianalisis untuk memastikan ia adalah format yang betul dan lebih rendah daripada saiz tertentu.
• fail seperti imej boleh dipratonton sebelum dimuat naik.
• Ia mungkin untuk menanam atau mengubah saiz imej pada elemen kanvas kemudian memuat naik fail yang dihasilkan.

Objek FileReader

FileReader membentuk sebahagian daripada API fail W3C dan menawarkan empat kaedah untuk memuatkan data secara asynchronously dari fail yang dirujuk dalam objek fail:

• .ReadStext (File F, [pengekodan]): Membaca fail f ke dalam rentetan. Pengekodan UTF-8 diandaikan, tetapi parameter pengekodan pilihan boleh menentukan format yang berbeza.
• .ReadAsDataurl (Fail F): Membaca fail f ke dalam url data yang dikodkan
3
• .ReadAsArrayBuffer (Fail F): Membaca Fail F sebagai objek ArrayBuffer.

Dalam kod berikut, kami akan menggunakan dua kaedah pertama untuk memuatkan dan memaparkan fail teks dan imej.

Membuka fail secara asynchronously dalam javascript

Inilah fungsi ParseFile () asal kami yang diluluskan objek fail apabila ia dipilih atau digugurkan ke unsur #FileDrag:

// output file information
function ParseFile(file) {

	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
	
}

Berikutan kemas kini status, kami akan menyemak sama ada kami mempunyai fail teks (teks/biasa, teks/html, teks/css, dan lain -lain), muatkannya menggunakan kaedah fileReader.readastext () dan paparkan hasilnya (selepas melarikan diri aksara):

	// display text
	if (file.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong></p><pre class="brush:php;toolbar:false">" + 
				e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
				"

" ); } reader.readAsText(file); }

Begitu juga, kita boleh menyemak sama ada kita mempunyai fail imej (imej/jpeg, imej/gif, imej/png dan lain -lain), muatkannya ke dalam url data menggunakan kaedah fileReader.readasDataurl (), dan lulus hasilnya ke atribut Src dari tag IMG:

	// display an image
	if (file.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong><br />" +
				'<img src="' + e.target.result + '" /></p>'
			);
		}
		reader.readAsDataURL(file);
	}

Sila lihat halaman demonstrasi di Firefox, Chrome, atau Opera (tiada sokongan seret & drop). Anda juga boleh memuat turun fail untuk memeriksa kod. Walaupun ini berguna, pada akhirnya, kami perlu memuat naik fail kami ke pelayan web. Tinggal untuk bagaimana untuk memuat naik fail secara asynchronously menggunakan html5 dan ajax ...

Soalan Lazim (Soalan Lazim) Mengenai HTML5 dan JavaScript Terbuka Fail Droped

Apakah tujuan menggunakan HTML5 dan JavaScript untuk membuka fail yang diturunkan? Ciri ini membolehkan pengguna menyeret dan menjatuhkan fail dari sistem tempatan mereka ke laman web. Setelah jatuh, fail boleh dibaca dan diproses menggunakan JavaScript. Ini amat berguna untuk tugas -tugas seperti memuat naik fail, membaca kandungan fail, atau memproses imej atau dokumen dalam aplikasi web. Apabila pengguna memilih fail pada sistem mereka dan menyeretnya ke laman web, acara 'Dragover' dicetuskan. Jika fail dijatuhkan, acara 'drop' dicetuskan. Harta Datatransfer, yang merupakan sebahagian daripada peristiwa -peristiwa ini, memegang data fail dan boleh digunakan untuk mengakses dan memproses fail. Sebaik sahaja fail dijatuhkan ke laman web, ia boleh diakses melalui harta DataTransfer. Objek FileReader baru boleh dibuat dan kaedah Readastext atau ReadasDataurl boleh digunakan untuk membaca kandungan fail. Hasilnya boleh diakses dalam acara 'Beban' objek FileReader.

Bolehkah saya membuka fail yang diturunkan sekaligus? Harta Datatransfer menyediakan harta 'fail' yang merupakan objek filelist. Objek ini mewakili senarai semua fail yang dijatuhkan. Anda boleh gelung melalui senarai ini untuk mengakses dan memproses setiap fail secara individu.

Apakah jenis fail yang boleh saya buka menggunakan HTML5 dan JavaScript? Walau bagaimanapun, bagaimana anda memproses fail akan bergantung pada jenisnya. Sebagai contoh, fail teks boleh dibaca sebagai teks, manakala fail imej boleh dibaca sebagai URL data dan dipaparkan menggunakan elemen IMG. Walau bagaimanapun, jika data fail dihantar ke pelayan, ia harus disahkan dengan betul dan dibersihkan untuk mengelakkan isu -isu keselamatan. Walau bagaimanapun, mungkin terdapat perbezaan bagaimana ciri -ciri ini dilaksanakan. Oleh itu, penting untuk menguji kod anda pada penyemak imbas yang berbeza untuk memastikan keserasian. Sebagai contoh, jika fail itu adalah imej, ia boleh dibaca sebagai URL data dan ditetapkan sebagai atribut SRC elemen IMG. Jika fail itu adalah fail teks, kandungannya boleh dimasukkan ke dalam elemen teks.

Bolehkah saya menyekat jenis fail yang boleh dijatuhkan? Jika jenis fail tidak sepadan dengan jenis yang dibenarkan, anda boleh memaparkan mesej ralat dan mengabaikan fail. Ciri seret dan drop tidak bergantung kepada lokasi fail. Selagi fail boleh diakses oleh pengguna, mereka boleh diseret dan jatuh ke laman web.

Atas ialah kandungan terperinci Cara Membuka Fail Diturunkan Menggunakan HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!