Rumah > Artikel > hujung hadapan web > Cara menggunakan jQuery dalam adegan pratonton
Cara menggunakan jQuery dalam adegan pratonton
- PHPzasal
- 2023-04-17 15:00:36492semak imbas
Dalam pembangunan web, pratonton imej, audio atau video adalah keperluan yang sangat biasa. Sudah tentu, anda perlu menggunakan ciri baharu HTML5 atau pemalam Flash untuk menyelesaikan tugas ini. Walau bagaimanapun, anda mungkin juga menghadapi masalah: bagaimana untuk memuat semula atau mengosongkan fail media dalam adegan pratonton?
Ini adalah ciri jQuery yang sangat berguna yang perlu kita ketahui: mengosongkan/mengalih keluar kandungan pratonton. Mari belajar cara menggunakan jQuery dalam adegan pratonton.
Pratonton pelaksanaan fungsi
Pertama, kita memerlukan elemen HTML yang boleh dipratonton, seperti img, audio atau video. Biasanya, kami menggunakan elemen <input type="file"> HTML5 untuk mencapai fungsi ini dan memaparkan kandungannya dalam elemen pratonton selepas memilih fail media.
<input type="file" id="mediaFile"> <img id="preview">
Seterusnya, gunakan jQuery untuk mendengar acara pemilihan fail dan membaca fail yang dipilih sebagai URL dan tetapkannya sebagai atribut src bagi elemen pratonton.
$('#mediaFile').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
}
});
Di sini kami menggunakan objek FileReader untuk membaca kandungan fail sebagai DataURL. Kami kemudiannya menetapkan DataURL ini sebagai atribut src bagi elemen pratonton. Ini akan memaparkan pratonton fail media.
Kosongkan Pelaksanaan Fungsi Pratonton
Selepas memaparkan kandungan pratonton, jika pengguna ingin menggantikannya atau memadamkannya, kami perlu menyediakan cara untuk mengosongkan kandungan pratonton. Mari kita lihat cara untuk menyelesaikan tugas ini dengan mudah menggunakan jQuery.
Pertama, kita perlu menetapkan atribut src elemen pratonton kepada rentetan kosong.
$('#preview').attr('src', '');
Ini akan mengalih keluar kandungan media daripada elemen pratonton. Walau bagaimanapun, jika pengguna memilih fail, laluan fail masih akan dipaparkan dalam elemen input fail. Untuk mengosongkan pemilihan fail asal sepenuhnya, kita perlu menggunakan helah.
Kami boleh mencipta elemen input fail baharu, menggantikannya dengan elemen input asal dan menetapkannya kepada elemen input fail baharu yang kosong. Ini akan mengosongkan laluan fail dan menetapkan semula pemilihan fail.
$('#mediaFile').replaceWith($('#mediaFile').clone(true));
Di sini, kami menggunakan kaedah klon() jQuery dan kaedah replaceWith() untuk mencapai fungsi ini. Kaedah klon() akan mencipta salinan elemen sedia ada dan menyerahkannya kepada kaedah replaceWith() untuk penggantian.
Contoh Penuh
Berikut ialah contoh lengkap yang menunjukkan cara menggunakan jQuery untuk melaksanakan fungsi pratonton dan jelas.
<!DOCTYPE html>
<html>
<head>
<title>jQuery清除预览示例</title>
</head>
<body>
<input type="file" id="mediaFile">
<img id="preview">
<button id="clearPreview">清除预览</button>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$('#mediaFile').change(function() {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
$('#preview').attr('src', e.target.result);
}
});
$('#clearPreview').click(function() {
$('#preview').attr('src', '');
$('#mediaFile').replaceWith($('#mediaFile').clone(true));
});
</script>
</body>
</html>
Di sini, kami telah menambah butang untuk mengosongkan kandungan pratonton. Mengklik butang ini akan memanggil fungsi pratonton yang jelas, menetapkan atribut src elemen pratonton kepada rentetan kosong dan menetapkan semula pemilihan fail.
Kesimpulan
Fungsi pratonton ialah keperluan yang sangat biasa dalam pembangunan tapak web atau aplikasi. Menggunakan helah jQuery, kami boleh melaksanakan pratonton dan fungsi pratonton jelas dengan mudah. Semoga panduan ringkas ini membantu!
Atas ialah kandungan terperinci Cara menggunakan jQuery dalam adegan pratonton. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!