Perkenalan
Menggunakan objek FileReader, aplikasi Web dapat secara tidak sinkron membaca konten file (atau buffer data mentah) yang disimpan di komputer pengguna, dan dapat menggunakan objek file atau objek gumpalan untuk menentukan file atau data yang akan diproses. Objek File dapat dari objek FileList yang dikembalikan oleh pengguna setelah memilih file pada elemen <input type = "Text" />, atau dari objek DataTransfer yang dihasilkan oleh operasi drag-and-drop, atau dari hasil pengembalian setelah menjalankan metode MozgetaSfile () pada HTMLCanVaSelement.
Beberapa halaman, unggah beberapa gambar kode demo
<! Doctype html> <html> <head> <title> Unggah gambar untuk menampilkan gambar pratinjau </iteme> <tyle> #Result img {height: 100px; Tampilan: blok inline; margin-kanan: 10px; margin-bottom: 10px; } </tyle> </head> <body> <dv> <p> <label> Pilih file gambar: </label> <input type = "file" id = "file_input" style = "display: none;" /> </p> <div id = "result"> <a href = "javascript: void (0);"> Tambahkan gambar </a> </div> </div> <div> <p> <label> Pilih file gambar: </label> <input type = "file" id = "file_input" style = "Display: none;" /> </p> <div id = "result"> <a href = "javascript: void (0);"> Tambahkan gambar </a> </div> </div> <script src = "jQuery-2.2.1.min.js"> </script> <script> $ (". Add_img_btn"). $ (ini) .parents (". Add_imgs"). Find ("Input [type = file]"). Klik (); result.innerhtml = "Maaf, browser Anda tidak mendukung filereader"; input.setAttribute ('dinonaktifkan', 'dinonaktifkan'); } else {$ (input) .unbind ("ubah"). on ("ubah", function () {var file = this.files [0]; if (!/image /// w+/. test (file.type)) {ware ("File harus gambar!"); return false;} varander = baru file. function (e) {$ (result) .Append ('<img src = "'+this.Result+'"/>');Di atas adalah semua tentang artikel ini, dan saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.