Apabila kita memuat naik fail, jika kita perlu memuat naiknya ke pelayan setiap kali sebelum kita boleh melihatnya, ia kelihatan munasabah tetapi sebenarnya tidak munasabah Jika kelajuan rangkaian perlahan atau terdapat masalah dengan gambar, ini bukan sahaja membuang masa pelanggan tetapi juga membuang sumber pelayan Okay, di bawah ini kami memperkenalkan pratonton setempat apabila memuat naik imej menggunakan js saya harap kaedah ini akan membantu anda.
1. Prinsip
dibahagikan kepada dua langkah:
Apabila input untuk memuat naik imej dicetuskan dan imej setempat dipilih, dapatkan URL objek (URL objek) imej yang hendak dimuat naik;
Tetapkan URL objek kepada atribut src bagi teg img pratulis untuk memaparkan imej.Di sini, kita perlu memahami kaedah File object, Blob object dan window.URL.createObjectURL() dalam Javascript.
1. Objek fail
Objek fail boleh digunakan untuk mendapatkan maklumat tentang fail, dan juga boleh digunakan untuk membaca kandungan fail ini Biasanya, objek File ialah objek FileList yang dikembalikan selepas pengguna memilih fail pada elemen input, atau ia boleh Daripada objek Pemindahan Data yang dijana oleh operasi seret dan lepas.Mari kita lihat mendapatkan objek FileList:
1 2 3 4 5 6 7 8 9 10 11 |
|
2. Objek gumpalan
Objek Blob ialah objek seperti fail yang mengandungi data mentah baca sahaja Data dalam objek Blob tidak semestinya dalam bentuk asli dalam JavaScript. Antara muka Fail adalah berdasarkan Blob, mewarisi fungsi Blob, dan lanjutkan sokongan Fail setempat pada komputer pengguna.URL objek yang kita ingin dapatkan sebenarnya diperoleh daripada objek Blob, kerana antara muka Fail mewarisi Blob. Mari tukar objek Blob menjadi URL:
1 2 3 4 5 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
|
2