Saya ingin dapat melihat pratinjau file (gambar) sebelum diunggah. Tindakan pratinjau harus dilakukan semua di browser tanpa menggunakan Ajax untuk mengunggah gambar.
Bagaimana saya bisa melakukan ini?
javascript
jquery
file-upload
Simbian
sumber
sumber
Jawaban:
Silakan lihat kode contoh di bawah ini:
Anda juga dapat mencoba sampel ini di sini .
sumber
document.getElementById('blah').src=e.target.result)
input.files[0]
sebagai data, lihat dokumen jQuery .input.files[0]
tidak memiliki path lengkap. Bagaimana FileReader menemukan file?Ada beberapa cara Anda bisa melakukan ini. Cara paling efisien adalah menggunakan URL.createObjectURL () pada File dari <input> Anda . Lewati URL ini ke img.src untuk memberi tahu browser agar memuat gambar yang disediakan.
Ini sebuah contoh:
Anda juga dapat menggunakan FileReader.readAsDataURL () untuk mem-parsing file dari <input> Anda. Ini akan membuat string dalam memori yang berisi representasi base64 dari gambar.
sumber
URL.revokeObjectURL
saat Anda selesai dengan gumpalan AndaSolusi satu lapis:
Kode berikut menggunakan URL objek, yang jauh lebih efisien daripada URL data untuk melihat gambar besar (URL data adalah string besar yang berisi semua data file, sedangkan URL objek, hanya string pendek yang mereferensikan data file di Penyimpanan):
URL yang dihasilkan akan seperti:
sumber
FileReader
,input.files
dll.)URL.createObjectURL
Adalah cara untuk menangani file yang dikirimkan pengguna, hanya membuat symlink di memori ke file nyata pada disk pengguna.Jawaban LeassTaTT bekerja dengan baik di peramban "standar" seperti FF dan Chrome. Solusi untuk IE ada tetapi terlihat berbeda. Berikut deskripsi solusi lintas-browser:
Dalam HTML kita membutuhkan dua elemen pratinjau,
img
untuk browser standar dandiv
untuk IEHTML:
Dalam CSS kami menentukan hal spesifik IE berikut:
CSS:
Dalam HTML kami menyertakan standar dan Javascripts khusus IE:
Ini
pic_preview.js
adalah Javascript dari jawaban LeassTaTT. Ganti$('#blah')
whith the$('#preview')
dan tambahkan$('#preview').show()
Sekarang Javascript khusus IE (pic_preview_ie.js):
Yaitu. Bekerja di IE7, IE8, FF dan Chrome. Silakan uji di IE9 dan laporkan. Gagasan pratinjau IE ditemukan di sini: http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
sumber
Saya telah mengedit jawaban @ Ivan untuk menampilkan gambar "Tidak Ada Pratinjau", jika itu bukan gambar:
sumber
Ini versi beberapa file , berdasarkan jawaban Ivan Baev.
HTML
JavaScript / jQuery
Membutuhkan jQuery 1.8 karena penggunaan $ .parseHTML, yang seharusnya membantu dengan mitigasi XSS.
Ini akan bekerja di luar kotak, dan satu-satunya ketergantungan yang Anda butuhkan adalah jQuery.
sumber
Iya. Itu mungkin.
Html
JS
Anda bisa mendapatkan Demo Langsung dari sini.
sumber
JSfiddle bersih dan sederhana
Ini akan berguna ketika Anda ingin acara dipicu secara tidak langsung dari div atau tombol.
sumber
<label>
dan menghindari javascript untuk menangani klik tombol sama sekali. Memicu input file dengan HTML / CSS murni. , dan itu sama sekali tidak rusak.Contoh dengan beberapa gambar menggunakan JavaScript (jQuery) dan HTML5
JavaScript (jQuery)
Markup (HTML)
sumber
Bagaimana dengan membuat fungsi yang memuat file dan menjalankan acara khusus. Kemudian lampirkan pendengar ke input. Dengan cara ini kami memiliki lebih banyak fleksibilitas untuk menggunakan file, tidak hanya untuk melihat pratinjau gambar.
Mungkin kode saya tidak sebagus beberapa pengguna tetapi saya pikir Anda akan mengerti maksudnya. Di sini Anda dapat melihat contohnya
sumber
Berikut ini adalah kode kerjanya.
Javascript:
sumber
Di Bereaksi, jika file ada di properti Anda, Anda dapat menggunakan:
sumber
Bagaimana dengan solusi ini?
Cukup tambahkan atribut data "tipe-data = dapat diedit" ke tag gambar seperti ini:
Dan skrip untuk proyek Anda tentunya ...
Lihat demo di JSFiddle
sumber
Coba ini
sumber
Ini akan mempratinjau beberapa file sebagai gambar kecil pada satu waktu
Html
Naskah
Demo Bekerja pada Codepen
Demo Bekerja di jsfiddle
Saya harap ini akan membantu.
sumber
Saya telah membuat plugin yang dapat menghasilkan efek pratinjau di IE 7+ berkat internet, tetapi memiliki beberapa keterbatasan. Saya memasukkannya ke halaman github sehingga lebih mudah untuk mendapatkannya
sumber
Untuk mengunggah banyak gambar (Modifikasi ke Solusi @ IvanBaev)
http://jsfiddle.net/LvsYc/12330/
Semoga ini bisa membantu seseorang.
sumber
Ini kode saya. Mendukung IE [6-9] 、 chrome 17 + 、 firefox 、 Opera 11 + 、 Maxthon3
sumber
Iamge default
sumber
Ini solusinya jika Anda menggunakan Bereaksi:
sumber
Ini adalah metode paling sederhana untuk melihat pratinjau gambar sebelum mengunggahnya ke server dari browser tanpa menggunakan Ajax atau fungsi yang rumit. Perlu acara "onchange" untuk memuat gambar.
Gambar akan segera dimuat setelah memilihnya.
sumber
untuk aplikasi saya, dengan parameter url GET terenkripsi, hanya ini yang berfungsi. Saya selalu mendapat
TypeError: $(...) is null
. Diambil dari https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURLsumber
HTML
Ini juga menangani kasus ketika file dengan jenis yang tidak valid (mis. Pdf) dipilih
sumber