masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web tutorial js 上传图片时本地先预览如何实现

上传图片时本地先预览如何实现

php中世界最好的语言
php中世界最好的语言
Mar 17, 2018 am 11:53 AM
bagaimana tempatan Pratonton

这次给大家带来上传图片时本地先预览如何实现，实现上传图片时本地先预览的注意事项有哪些，下面就是实战案例，一起来看一下。

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定要读取的文件或数据。下面通过本文给大家介绍JS中利用FileReader实现上传图片前本地预览功能，需要的朋友参考下

引子

      平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去，成功之后拿到URL再渲染到页面上，这样做在图片比较小的时候没什么问题，大一点的话就会比较慢才能看到预览了，而且还产生了垃圾文件，所以比较好的是上传之前先在本地预览一下。

      之前做项找插件的时候就知道纯前端可以实现图片本地预览，可今天面试的时候被问到时竟然一脸懵逼，然后竟然无意中就在电脑桌面发现了实现的demo，然后根据demo查了一下API，稍微总结下：

首先得拿到File对象

      当用input标签上传图片时event对象中会包含file对象的一个集合

event.target.files

核心是FileReader对象

根据MDN上的说法：

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File 或 Blob 对象指定要读取的文件或数据。

首先要作为构造函数得到一个FileReader的实例对象

1

var freader = new FileReader();

Salin selepas log masuk

利用readAsDataURL()方法读取指定的内容

1

freader.readAsDataURL(file);

Salin selepas log masuk

最后就是一个事件处理，相当于监控读取进度，我们这里是当读取完成时渲染图片，所以用onload

1

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

Salin selepas log masuk

这里架加载完成之后最终得到的是一个base64编码的src地址，具体为什么下次查清楚了再专门写篇关于base64编码的文章

完整代码

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

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title>Document</title>

</head>

<body>

 <form action=""> 

 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"> 

 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px"> 

 </form>

 <script>

 function changImg(e){ 

 var myImg = document.getElementById('myImg');

 for (var i = 0; i < e.target.files.length; i++) {

 var file = e.target.files[i];

 console.log(file);

 if (!(/^image\/.*$/i.test(file.type))) {

  continue; //不是图片 就跳出这一次循环

 }

 //实例化FileReader API

 var freader = new FileReader();

 freader.readAsDataURL(file);

 freader.onload = function(e) {

  console.log(e);

  myImg.setAttribute(&#39;src&#39;, e.target.result);

 }

 }

 }

 </script>

</body>

</html>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

设置cookie过期自动更新和自动获取

使用import 和require打包JS

select的option叠加怎样处理

Atas ialah kandungan terperinci 上传图片时本地先预览如何实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?
3 minggu yang lalu By DDD
R.E.P.O. Simpan Fail Lokasi: Di ​​manakah & bagaimana untuk melindunginya?
4 minggu yang lalu By DDD
Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7351
15
Tutorial Java
1628
14
Tutorial CakePHP
1353
52
Tutorial Laravel
1265
25
Tutorial PHP
1214
29
Tunjukkan Lagi
Related knowledge
Bagaimana untuk menambah tera air dan menyimpan imej jauh selepas menyimpannya secara tempatan dalam PHP? Bagaimana untuk menambah tera air dan menyimpan imej jauh selepas menyimpannya secara tempatan dalam PHP? Jul 11, 2023 pm 11:48 PM

Bagaimana untuk menambah tera air dan menyimpan imej jauh selepas menyimpannya secara tempatan dalam PHP? Dalam pembangunan PHP, kami sering menghadapi keperluan untuk menyimpan imej jauh secara tempatan. Kadangkala, kami juga mungkin perlu menambahkan tera air pada imej yang disimpan untuk melindungi hak cipta atau menambah maklumat tambahan. Artikel ini akan memperkenalkan cara menggunakan PHP untuk menyimpan gambar jauh ke setempat dan menambah tera air pada gambar yang disimpan. 1. Simpan imej jauh ke tempatan Pertama, kita perlu menggunakan fungsi operasi fail PHP untuk menyimpan imej jauh ke tempatan. Berikut ialah kod contoh mudah: &

Bagaimana untuk menambah muzik tempatan pada muzik soda Bagaimana untuk menambah muzik tempatan pada muzik soda Feb 23, 2024 pm 07:13 PM

Bagaimana untuk menambah muzik tempatan ke Muzik Soda? Anda boleh menambah muzik tempatan kegemaran anda ke APP Muzik Soda, tetapi kebanyakan rakan tidak tahu cara menambah muzik tempatan Seterusnya ialah tutorial grafik tentang cara menambah muzik tempatan yang dibawa oleh editor, pengguna yang berminat datang dan lihat! Tutorial menggunakan muzik soda Cara menambah muzik tempatan ke muzik soda 1. Mula-mula buka APP muzik soda dan klik pada kawasan fungsi [Muzik] di bahagian bawah halaman utama ikon [tiga titik] di sudut kanan bawah 3. Akhir sekali Kembangkan bar fungsi di bawah dan pilih butang [Muat Turun] untuk menambahkannya ke muzik tempatan.

Bagaimana untuk melaksanakan tatal imej dan pratonton lakaran kecil dalam Vue? Bagaimana untuk melaksanakan tatal imej dan pratonton lakaran kecil dalam Vue? Aug 18, 2023 pm 01:51 PM

Bagaimana untuk melaksanakan tatal imej dan pratonton lakaran kecil dalam Vue? Dalam projek Vue, kami selalunya perlu memaparkan sejumlah besar gambar, dan berharap pengguna boleh menyemak imbas dan pratonton gambar ini dengan mudah. Artikel ini akan memperkenalkan cara menggunakan komponen Vue untuk melaksanakan fungsi tatal imej dan pratonton lakaran kenit. Pertama, kita perlu memasang dan memperkenalkan perpustakaan Vue yang sesuai untuk memudahkan penatalan imej dan pratonton lakaran kenit. Dalam contoh ini, kami akan menggunakan vue-awesome-swiper dan vue-image-preview dua perpustakaan untuk melaksanakan

Akses Awal kepada Ciri Masa Depan Pratonton Teknologi Safari 173 Dikeluarkan Akses Awal kepada Ciri Masa Depan Pratonton Teknologi Safari 173 Dikeluarkan Jul 02, 2023 pm 01:37 PM

Apple hari ini mengeluarkan Safari Technology Preview versi 173, yang merangkumi beberapa ciri yang mungkin dilancarkan dalam Safari 17. Versi ini sesuai untuk versi beta macOS Sonoma dan sistem macOS Ventura yang berminat boleh memuat turunnya dari tapak web rasmi. Pratonton Teknologi Safari versi 173 menambah blok bendera ciri dalam tetapan, menggantikan ciri percubaan dalam menu pembangunan asal. Bahagian ini membolehkan pembangun mencari ciri khusus dengan pantas dan menandakan status sebagai "stabil", "tersedia untuk ujian", "pratonton" atau "pembangun" dengan cara yang berbeza. Menu pembangunan yang direka bentuk semula memudahkan pencipta mencari alatan utama untuk membina halaman web, aplikasi web, kandungan web dalam aplikasi lain,

Adakah terdapat masa depan untuk pekerjaan dalam farmasi klinikal di Universiti Perubatan Harbin? (Apakah prospek pekerjaan untuk farmasi klinikal di Universiti Perubatan Harbin?) Adakah terdapat masa depan untuk pekerjaan dalam farmasi klinikal di Universiti Perubatan Harbin? (Apakah prospek pekerjaan untuk farmasi klinikal di Universiti Perubatan Harbin?) Jan 02, 2024 pm 08:54 PM

Apakah prospek pekerjaan farmasi klinikal di Universiti Perubatan Harbin Walaupun situasi pekerjaan negara tidak optimistik, graduan farmaseutikal masih mempunyai prospek pekerjaan yang baik. Secara keseluruhannya, bekalan graduan farmaseutikal adalah kurang daripada permintaan Syarikat farmaseutikal dan kilang farmaseutikal adalah saluran utama untuk menyerap graduan tersebut. Menurut laporan, dalam beberapa tahun kebelakangan ini, nisbah bekalan-permintaan untuk pelajar siswazah dalam jurusan seperti persediaan farmaseutikal dan kimia perubatan semula jadi telah mencapai 1:10. Arah pekerjaan jurusan farmasi klinikal: Selepas tamat pengajian, pelajar jurusan perubatan klinikal boleh melibatkan diri dalam rawatan perubatan, pencegahan, penyelidikan perubatan, dsb. dalam unit perubatan dan kesihatan, penyelidikan perubatan dan jabatan lain. Jawatan pekerjaan: Wakil perubatan, wakil jualan farmaseutikal, wakil jualan, pengurus jualan, pengurus jualan wilayah, pengurus pelaburan, pengurus produk, pakar produk, jururawat

Panduan pemasangan apk Win11 Panduan pemasangan apk Win11 Jan 03, 2024 pm 10:24 PM

Seperti yang kita semua tahu, Microsoft mengumumkan bahawa win11 akan dapat menjalankan aplikasi Android dan memasang apk tempatan Namun, selepas mengemas kini win11, pengguna mendapati bahawa mereka tidak tahu bagaimana untuk memasang apk tempatan belum melaksanakan ciri ini untuk win11 Ia perlu Tunggu fungsi dipasang sebelum anda boleh menggunakannya. Cara memasang apk tempatan di win11: 1. Menurut Microsoft, selepas win11 telah memasang fungsi ini, anda boleh terus klik dua kali fail apk yang dimuat turun untuk memasangnya secara terus. 2. Selepas pemasangan selesai, pengguna juga boleh menjalankannya terus dalam sistem. 3. Walaupun ia kini merupakan versi rasmi win11, Microsoft masih belum melaksanakan ciri ini untuk win11. 4. Jadi jika pengguna ingin menggunakan win11

Cara melaksanakan muat naik imej borang dan pratonton dalam pemprosesan borang Vue Cara melaksanakan muat naik imej borang dan pratonton dalam pemprosesan borang Vue Aug 10, 2023 am 11:57 AM

Cara melaksanakan muat naik imej borang dan pratonton dalam pemprosesan borang Vue Pengenalan: Dalam aplikasi web moden, pemprosesan borang adalah keperluan yang sangat biasa. Satu keperluan biasa ialah membenarkan pengguna memuat naik imej dan melihatnya dalam bentuk. Sebagai rangka kerja bahagian hadapan, Vue.js menyediakan kami pelbagai alatan dan kaedah untuk mencapai keperluan ini. Dalam artikel ini, saya akan menunjukkan kepada anda cara melaksanakan fungsi muat naik dan pratonton imej dalam pemprosesan borang Vue. Langkah 1: Tentukan komponen Vue Pertama, kita perlu mentakrifkan kumpulan Vue

Bagaimana untuk melaksanakan muat naik imej dan pratonton dalam uniapp Bagaimana untuk melaksanakan muat naik imej dan pratonton dalam uniapp Oct 21, 2023 am 11:48 AM

Bagaimana untuk melaksanakan muat naik imej dan pratonton dalam uniapp Dalam rangkaian sosial moden dan aplikasi e-dagang, muat naik imej dan fungsi pratonton adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan cara melaksanakan fungsi muat naik dan pratonton imej dalam uniapp dan memberikan contoh kod khusus. 1. Pelaksanaan fungsi muat naik imej Dalam projek uniapp, anda perlu menambah komponen muat naik imej pada halaman, seperti yang ditunjukkan di bawah: &lt;template&gt;&lt;lihat&gt;&lt;im

See all articles