Artikel ini memperkenalkan cara mengubah jalur absolut suatu gambar menjadi objek file dalam HTML5 dan membagikannya kepada semua orang. Detailnya adalah sebagai berikut:
Untuk mengubah jalur absolut gambar menjadi pengkodean base64, silakan lihat artikel ini
Mari kita pahami dulu poin-poin pengetahuan dasar:
1. Memahami objek FileList dan objek file di HTML5.Dalam HTML5, objek FileList mewakili daftar file yang dipilih oleh pengguna. Dengan menambahkan atribut multipe, beberapa file dapat dipilih sekaligus dalam kontrol file. Setiap file yang dipilih pengguna dalam kontrol adalah objek file, dan objek FileList adalah daftar objek file. Mewakili semua file yang dipilih oleh pengguna. Pertama mari kita lihat demo sederhana untuk melihat atribut apa yang dimiliki objek file. Kode berikut:
<!DOCTYPE html><html> <head> <title>sistem file:URL</title> </head> <body> <div> <label>Pilih:</label> <input type='file' multiple id= file /> <tipe masukan=button value=Unggah file onClick=showFile() /> </div> <skrip> function showFile() { var files = document.getElementById('file').files; Mengembalikan semua file yang dipilih untuk (var i = 0, ilen = files.length; i < ilen; i++) { // Cetak informasi dari objek file tunggal console.log(files[i]); informasinya sebagai berikut: File { lastModified: 1457946612000 lastModifiedDate: Sen 14 Mar 2016 17:10:12 GMT+0800 (CST) {} nama: test.html ukuran: 796 tipe: text/html webkitRelativePath: */ /* Jika gambar diunggah, informasi berikut akan dikembalikan: File { lastModified: 1466907500000 lastModifiedDate: Sun Jun 26 2016 10 : 18:20 GMT+0800 (CST) {} nama: a.jpg ukuran: 23684 type: image/jpeg webkitRelativePath: } */ /* Oleh karena itu, jika Anda ingin menentukan apakah file yang diupload adalah file gambar, Anda dapat menilai berdasarkan jenisnya sebagai berikut: var file = files[i]; /image// /w+/.test(file.type)) { console.log('File ini bukan file gambar'); else { console.log('File ini adalah file gambar'); Tetapi jika Anda hanya ingin mentransfer gambar, Anda dapat menambahkan atributaccept=image/* ke kontrol gambar, kita dapat menulis kode sebagai berikut: <input type='file' multiple Accept = 'image/gif,image/jpeg; ,gambar/ jpg,gambar/png' /> */ } } </script> </body></html> 2. Memahami objek BlobPoin penting: Dalam HTML5, objek Blob baru ditambahkan untuk mewakili data biner asli. Faktanya, objek file juga mewarisi objek Blob.
Objek Blob memiliki dua atribut. Atribut size mewakili panjang byte objek Blob, dan atribut type mewakili tipe MIME dari Blob.
Silakan lihat kode berikut:
<!DOCTYPE html><html> <head> <title>sistem file:URL</title> </head> <body> <div> <label>Pilih file:</label> <input type=file id=file / > <input type=button value=Tampilkan informasi file onClick=showFileType() /> <p>Panjang byte file: <span id=size></span></p> <p>Jenis file: <span id=type></span></p> </div> <script> function showFileType() { var file; // Dapatkan file pertama yang dipilih oleh pengguna file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // Menampilkan panjang file dalam byte size.innerHTML = file.size; Menampilkan tipe file type.innerHTML = file.type; // Buka konsol untuk melihat objek file yang dikembalikan console.log(file);Catatan: Blob dan File dapat digunakan secara bersamaan, dan FileReader dapat digunakan untuk membaca data dari Blob.
Berikut ini adalah alamat gambar jalur absolut yang diubah menjadi gambar berkode base64, dan kemudian gambar berkode base64 diubah menjadi objek blob. Kodenya adalah sebagai berikut:
<!DOCTYPE html><html> <head> <title>Ubah data url gambar base64 menjadi Blob</title> </head> <body> <script> /** * Konversi data url gambar base64 Untuk Blob * @param urlData * data gambar base64 dinyatakan dalam mode url */ fungsi convertBase64UrlToBlob(base64){ var urlData = base64.dataURL; var type = base64.type; var bytes = window.atob(urlData.split(',')[1]); //Hapus header url dan ubah menjadi byte //Tangani pengecualian dan ubah kode ascii kurang dari 0 menjadi lebih besar dari 0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type}); /* * Ubah alamat jalur absolut gambar menjadi pengkodean base64 sebagai berikut: */ function getBase64Image(img) { var kanvas = dokumen.createElement(kanvas); kanvas.lebar = img.lebar; kanvas.tinggi = img.tinggi; kanvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); ; var dataURL = kanvas.toDataURL(gambar/+ext); kembali { dataURL: dataURL, ketik: gambar/+ext }; } var img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; var gambar = gambar baru(); gambar.crossOrigin = ''; (){ var base64 = getBase64Image(gambar konsol.log(base64); Informasi pencetakannya adalah sebagai berikut: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = convertBase64UrlToBlob(base64 console.log(img2); : Blob {ukuran: 9585 , tipe: image/jpg} */ } </script> </body></html>Catatan: Dalam HTML5, objek Blob baru ditambahkan untuk mewakili data biner asli. Faktanya, objek file juga mewarisi objek Blob. Oleh karena itu kita dapat menggunakan alamat absolut gambar untuk mengubahnya menjadi objek file.
Oleh karena itu, kita dapat menggunakan alamat absolut gambar untuk mengubahnya menjadi objek file. Untuk demo detailnya, Anda dapat melihat kontrol unggah gambar di git saya. Plugin ini pertama-tama mendukung pengunggahan gambar, dan kemudian tiba-tiba saya menemukannya ketika saya masuk ke halaman edit, saya perlu menampilkan gambar default. Anda juga bisa. Pada saat yang sama, didukung untuk terus mengunggah gambar baru saat menampilkan gambar secara default, atau menghapus semua gambar saya alamat absolut gambar tersebut, jadi saya bertanya-tanya bagaimana cara mengubah alamat absolut gambar menjadi objek file. Jika saya tidak mengonversinya menjadi objek file, saat menggunakan kode ini, var reader = new FileReader(); akan melaporkan kesalahan, sehingga Anda dapat menggunakan objek blob yang kita bicarakan di atas untuk mengubahnya menjadi objek blob terlebih dahulu, dan kemudian Anda dapat menggunakan objek operasi file fileReader.
Untuk kode detailnya, silakan lihat kontrol unggah gambar di git saya (https://github.com/tugenhua0707/html5UploadImage). Untuk efeknya, silakan lihat https://tugenhua0707.github.io/html5UploadImage/index.html).
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.