Rumah  >  Artikel  >  hujung hadapan web  >  Pelaksanaan HTML5 pratonton imej tempatan _html5 kemahiran tutorial

Pelaksanaan HTML5 pratonton imej tempatan _html5 kemahiran tutorial

WBOY
WBOYasal
2016-05-16 15:45:511716semak imbas

Penerangan Masalah
Andaikan kita mempunyai kawalan muat naik imej dalam HTML:

Salin kod
Kod tersebut ialah seperti berikut :


Perhatikan bahawa accept="image/*" adalah sangat penting. Ia menyatakan bahawa imej yang akan dimuat naik akan berkaitan dengan jenis pemilihan tetingkap timbul sistem dan isu lain pada terminal mudah alih.
Kemudian, persoalannya, adakah terdapat cara untuk membaca kandungan imej sebelum menghantar borang ke pelayan?
Nampaknya mudah, semuanya adalah fail pelanggan, jadi ia sepatutnya boleh dilakukan, tetapi sebenarnya tidak ada cara yang baik sebelum ini, tetapi sejak kemunculan HTML5, fungsi ini telah kembali, dan fungsi ini boleh direalisasikan dengan mudah melalui FileReader .
Contoh menggambarkan masalah

Salin kod
Kodnya adalah seperti berikut:

$(function () {
$('#upload_image').change(function(event) {
// Dapatkan objek HTML5 js bagi fail berdasarkan
fail var ini = event.target.files, file;
if (files && files.length > 0) {
// Dapatkan fail yang sedang dimuat naik
fail = fail[0]; lihat apakah ini dalam konsol Apakah objeknya?
console.log(file); * 2) {
makluman('Saiz gambar tidak boleh melebihi 2MB!');
kembali palsu; , jana melalui objek fail ini URL imej yang tersedia
// Dapatkan alat URL tetingkap
var URL = window.URL || window.webkitURL
// Jana url sasaran melalui fail
var imgURL = URL.createObjectURL(file );
// Gunakan URL ini untuk menjana dan memaparkannya
$('body').append($('').attr ('src', imgURL));
// Gunakan ayat berikut untuk melepaskan pelayan untuk url ini dalam memori Selepas dijalankan, URL akan menjadi tidak sah
// URL.revokeObjectURL(imgURL); 🎜>}
});
});
Penerangan ringkas

Ringkasnya, keseluruhan reka bentuk operasi adalah seperti berikut:

1. Cetuskan acara melalui acara perubahan >2. Dapatkan fail objek js daripada fail yang dimuat naik melalui objek acara; >5.* Keluarkan Perkara utama pelayan URL ini

:
1 Untuk fail yang sama, setiap kali URL.createObjectURL dipanggil, URL yang berbeza akan dijana semula 2. Panggil URL Apabila .createObjectURL, penyemak imbas secara automatik membuka ruang dalam memori untuk menyampaikan URL, yang bermaksud bahawa URL boleh diminta dengan jayanya; pelayan akan mematikannya, dan 404 akan muncul apabila meminta URL ini sekali lagi

4. ImgURL mungkin ini Sepertinya: gumpalan:http://localhost:8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb

Kenyataan:
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