1. Beberapa metode untuk mewujudkan pratinjau gambar.
Setelah memahaminya, metodenya sebenarnya serupa. Mungkin ada cara berikut:
① Berlangganan acara Onchange dari elemen input [type = file].
Setelah jalur yang dipilih diubah, gambar diunggah ke server, dan alamat gambar dikembalikan ke sisi server dan ditugaskan ke elemen IMG.
Kekurangan: Beban kerja besar. Beberapa unggahan bukanlah gambar yang perlu diunggah pengguna pada akhirnya. Namun, metode ini akan menyimpan semua gambar yang dipilih selama proses unggahan ke server, yang akan menyebabkan pemborosan sumber daya. Selain itu, membersihkan gambar pratinjau sementara di sisi server juga membutuhkan sejumlah pekerjaan.
②Gunakan filereader fitur HTML5 baru.
Objek ini menyediakan banyak metode terkait, metode yang paling penting adalah readasdataurl. Klik saya untuk mempelajari lebih lanjut.
Kerugian: Skema data URI yang diperoleh melalui metode ReadasDataurl dari filereader akan menghasilkan string base64 yang sangat panjang. Jika gambar lebih besar, string akan lebih lama. Jika reflow halaman terjadi, itu akan menyebabkan degradasi kinerja. Selain itu, dukungan browser tidak konsisten, dan browser yang didukung adalah: FF3.6+, Chrome7+, IE10+.
③ Gunakan window.url.createObjecturl alih -alih filereader, dan kemudian gunakan filter dximagetransform.microsoft.alphaimageloader untuk kompatibel dengan IE.
Kerugian: Karena pertimbangan keamanan di IE11, alamat nyata dari file yang dipilih pengguna tidak dapat diperoleh melalui nilai, outerHTML dan getAttribute pada elemen input [type = file], dan hanya dapat diperoleh.
D:/frontend/nama file. Oleh karena itu, Anda perlu menggunakan metode Document.Selection.createrangecollection untuk mendapatkan alamat nyata.
2. Produksi plug-in saya
Saya memilih metode yang lebih konservatif, yang merupakan metode ketiga untuk menggunakan window.url.createObjecturl alih -alih filereader, dan kemudian menggunakan filter dximagetransform.microsoft.alphaimageloader untuk kompatibel dengan IE.
① Langkah pertama adalah tata letak HTML
<Div id = "pic"> <img id = "preview" src = "../ imgs/default.jpeg"> </div> <input type = "file" id = "unggahbtn" accept = "gambar/*" onchange = "setpreviewpic ()">
Apakah Anda ingin mengatakannya sangat mudah?
Langkah detik, enkapsulasi plug-in JS.
1. Buat objek
Saya terutama mengadopsi metode pewarisan gabungan dan merangkum dua metode, yaitu unggahan gambar tunggal dan beberapa unggahan gambar. Karena apakah itu mengunggah satu gambar atau mengunggah satu gambar, Anda perlu meneruskan dan mengunggah tombol input, tag IMG, div yang dibungkus dalam IMG, dan nilai gambar tunggal maksimum, dalam KB. Oleh karena itu, keempat parameter ini harus diteruskan saat membuat objek gambar unggahan. Metode untuk membuat objek ini adalah sebagai berikut:
var setpreviewpic = fungsi (fileobj, pratinjau, picwrap, maximgsize) {this.fileoBj = fileobj; this.preview = preview; this.picwrap = picwrap; this.maximgsize = maximgsize;}2. Tentukan pola pencocokan
Karena mengunggah gambar, selain menambahkan penerimaan = "gambar/*" untuk memasukkan dan membuat pembatasan awal, keteraturan JS juga diperlukan untuk menentukan apakah itu adalah gambar melalui deteksi jalur. Jadi tentukan pola ini pada prototipe untuk digunakan dalam dua metode:
SetPreviewPic.prototype.pattern = regexp baru ('/. (Jpg | png | jpeg)+$', 'i');3. Tentukan metode
Hal utama adalah menentukan apakah lingkungan lebih rendah dari IE11 dan menulis dua jenis solusi. Yang pertama adalah secara langsung mempratinjau gambar dengan mengubah SRC IMG, dan yang kedua adalah untuk mencapai efek pratinjau melalui filter di bawah versi IE yang lebih rendah.
FF, Chrome, IE11 atau di atas: (Kode untuk mempratinjau beberapa gambar diposting di sini)
<span> if (maxpics) {</span> <br> if (this.fileobj.files && this.fileoBj.files [0]) {var imgs = this.picwrap.querySelectorAll ('img'); // Temukan berapa banyak gambar yang sudah ada di dom var num = imgs.length; var html = this.picwrap.innerhtml; if (number (num) <number (maxpics)) {// menilai apakah batas unggahan maksimum terlampaui jika (num == 1 && (! imgs [0] .classList.contains ('newload'))) {// liputan gambar default pertama pertama html = '';} if (this.pattern.test (fileobj.files [0] .name)) {if (judgesize (fileobj.files [0] .size/1024, this.maximgsize)) {// menilai apakah ukuran gambar melebihi batas html = '<img style = "margin: 5px; lebar: '+lebar+' px; tinggi: '+tinggi+' px;" src = '+window.url.createObjecTurl (this.fileobj.files [0])+' /> '+html; this.picwrap.innerHtml = html;} else {alert ('gambar yang Anda unggah terlalu besar!');}} else {waspada ('apa yang Anda unggah sepertinya bukan gambar, silakan periksa!');}} else {warn ('unggah paling banyak'+maxpics+'pic!');Di bawah IE11, gunakan filter untuk mencapai efek:
var nums = this.picwrap.childnodes.length; // karena queryselectorall dan metode lain tidak didukung di bawah IE6, kita dapat menilai jika (num <maxpics+2) dengan panjang childnodes jika (num <maxpics+2) {// penambahan 2 di sini adalah karena ada gambar default, dan panjangnya. if (document.selection) {var imgsrc = document.selection.createrange (). text; var gambar = gambar baru (); image.src = imgsrc; filesize = Image.filesize; if (judgesize (image.filesize/1024, this.maximgsize)) {// Ukuran div harus disetel di IE var ele = document.createElement ('div'); ele.style.width = width+'px'; ele.style.height = height+'px'; ele.style.filter = "progid: dximagetra nsform.microsoft.alphaimageloader (sizingMethod = skala, src = '"+imgsrc+"') "; coba {this.picwrap.appendChild (ele);} catch (e) {waspada ('the gambar yang Anda unggah salah, silakan pilih lagi! '); kembalikan false;} this.preview.style.display = 'none'; document.selection.empty ();} else {ware ('gambar yang Anda unggah terlalu besar!');}}Pada titik ini, sudah selesai!
penggunaan:
<type script = "Text/JavaScript" src = "../ js/singlePic.js"> </script> <script> var fileobj = document.getElementById ('unggah'); var preview = document.geteLementById ('preview'); var picwrap = document.getElementByid ('pic'); SetPreviewPic (Fileobj, Preview, PicWRAP, 100); // Tentukan objek gambar unggah, parameternya adalah tombol input untuk mengunggah gambar, paket tag IMG, div yang dibungkus dalam IMG, dan nilai foto tunggal maksimum, unitnya adalah kbobj.uploadsingleic (200.250);//unggahnya (200.250);//unggah) (200.250);//unggah. // unggah (200.250,2); // unggah (200.250,2); // unggah (200.250,2); // unggah (200.250,2); // mengunggah beberapa gambar, parameternya adalah lebar, tinggi, dan jumlah maksimum unggahan} </script>Di atas adalah pengetahuan yang relevan tentang produksi plug-in preview gambar JS unggah (kompatibel dengan IE6) yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas Anda tepat waktu!