Pelaksanaan HTML5 pratonton imej tempatan _html5 kemahiran tutorial

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