Fungsi Pratinjau Upload Gambar terutama digunakan untuk melihat pratinjau efek sebelum unggahan gambar. Saat ini, metode utama terutama termasuk JS, JQuery dan Flash Implementasi, tetapi kami umumnya menggunakan JS untuk mengimplementasikan fungsi Pratinjau Upload Gambar. Mari kita lihat contoh di bawah ini.
prinsip:
Ini dibagi menjadi dua langkah: ketika input mengunggah gambar dipicu dan gambar lokal dipilih, URL (URL objek) dari objek yang akan diunggah; Tetapkan URL Objek ke atribut SRC dari tag IMG yang ditulis untuk menampilkan gambar.
Di sini, kita perlu memahami objek file, objek gumpalan dan window.url.createObjecturl () dalam JavaScript.
Objek file:
Objek file dapat digunakan untuk mendapatkan informasi tentang file, dan juga dapat digunakan untuk membaca konten file. Secara umum, objek file berasal dari objek FileList yang dikembalikan oleh pengguna setelah memilih file pada elemen input, atau dapat berupa objek DataTransfer yang dihasilkan oleh operasi drag dan drop gratis.
Mari kita lihat mendapatkan objek Distist:
Salinan kode adalah sebagai berikut:
<type script = "Text/JavaScript" src = "jQuery.js"> </script>
<input id = "unggah" type = "file">
<img id = "pratinjau" src = "">
<type skrip = "Teks/JavaScript">
$ ('#unggah'). ubah (function () {
// Dapatkan elemen pertama dari daftar file
alert (document.geteLementById ('unggah'). File [0]);
});
</script>
Objek Blob:
Objek Blob adalah objek seperti file yang berisi data mentah baca-saja. Data dalam objek gumpalan tidak harus menjadi bentuk asli dalam JavaScript. Antarmuka file didasarkan pada gumpalan, mewarisi fungsi gumpalan, dan meluas untuk mendukung file lokal di komputer pengguna.
URL objek yang ingin kami dapatkan sebenarnya diperoleh dari objek Blob, karena antarmuka file mewarisi gumpalan. Berikut adalah konversi objek gumpalan menjadi URL:
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
var f = document.getElementById ('unggah'). File [0];
var src = window.url.createObjecUrl (f);
document.geteLementById ('pratinjau'). src = src;
</script>
kesesuaian:
Metode di atas cocok untuk browser chrome
Jika itu adalah browser IE, Anda dapat secara langsung menggunakan nilai input alih -alih SRC
Saat melihat informasi secara online, Anda dapat secara langsung menggunakan metode getasdataurl () dari objek file untuk mendapatkan URL. Sekarang metode ini telah dihapuskan. Demikian pula, ada metode getastext () dan getasbinary (). Mari kita lihat contoh seperti itu.
Salinan kode adalah sebagai berikut:
fungsi getfullpath (obj) {// Dapatkan jalur lengkap ke gambar
if (obj) {
//yaitu
if (window.navigator.useragent.indexof ("msie")> = 1) {
obj.select ();
return document.selection.createrange (). Teks;
}
// Firefox
lain if (window.navigator.useragent.indexof ("firefox")> = 1) {
if (obj.files) {
kembalikan obj.files.item (0) .getasDataurl ();
}
mengembalikan obj.value;
}
mengembalikan obj.value;
}
}
Kode ini adalah jalur lengkap untuk mendapatkan gambar klien
Kami akan membatasi ukuran dan formatnya
Salinan kode adalah sebagai berikut:
$ ("#loadfile"). ubah (function () {
var strsrc = $ ("#loadfile"). val ();
img = gambar baru ();
img.src = getfullpath (strsrc);
// Pastikan bahwa format file unggah sudah benar
var pos = strsrc.LastIndexOf (".");
var lastName = strsrc.substring (pos, strsrc.length)
if (lastname.tolowercase ()! = ".jpg") {
peringatan ("Jenis file yang Anda unggah adalah" + LastName + ", gambar harus dari tipe JPG");
mengembalikan false;
}
// Verifikasi rasio aspek file yang diunggah
if (img.height / img.width> 1.5 || img.height / img.width <1.25) {
Peringatan ("Proporsi gambar yang Anda unggah berada di luar jangkauan, dan rasio aspek harus antara 1,25-1,5");
kembali;
}
// Verifikasi apakah file yang diunggah terlalu besar
if (img.filesize / 1024> 150) {
peringatan ("Ukuran file yang Anda unggah melebihi batas 150k!");
mengembalikan false;
}
Di antara mereka, LoadFile adalah ID dari file input HTML. Setelah acara perubahannya, yaitu, setelah memilih file yang akan diunggah, biarkan gambar ditampilkan di kotak gambar? Tambahkan kode berikut ke akhir kode di atas
Salinan kode adalah sebagai berikut:
$ ("#stupic"). attr ("src", getfullpath (ini));
Karena jQuery digunakan, mari kita bagikan contoh kode yang ditulis dalam jQuery:
Salinan kode adalah sebagai berikut:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head1">
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<type script = "Text/JavaScript" src = "jQuery.js"> </script>
<bahasa skrip = "javascript">
$ (function () {
var ei = $ ("#besar");
ei.hide ();
$ ("#img1"). mousemove (function (e) {
ei.css ({top: e.pagey, kiri: e.pagex}). html ('<img style = "border: 1px solid grey;" src = "' + this.src + '" />'). show ();
}). mouseout (function () {
ei.hide ("lambat");
})
$ ("#f1"). ubah (function () {
$ ("#img1") .attr ("src", "file: ///"+$ ("#f1") .val ());
})
});
</script>
<type style = "text/css">
#large {position: absolute; display: none; z-index: 999;}
</tyle>
</head>
<body>
<form name = "form1" id = "form1">
<Div id = "Demo">
<input id = "f1" name = "f1" type = "file" />
<img id = "img1">
</div>
<Div ID = "Besar"> </Div>
</form>
</body>
</html>