图片上传预览
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box{width:200px;height:200px;border:1px solid #ccc;/*border-radius:50%;*/overflow:hidden;}#box img{/*width:100%;*/height:100%;}</style> </head> <body><input type="file"><div id='box'></div> </body> </html><script>var input = document.querySelector('input');var div = document.getElementById('box')input.addEventListener('change',function(){//用fileReader對(duì)象來(lái)讀取這個(gè)文件，顯示在DIV當(dāng)中var file = this.files[0];//1. 創(chuàng)建對(duì)象var fr = new FileReader();// 2. 讀取文件fr.readAsDataURL(file);//3. 當(dāng)文件讀取完畢 之后，獲取文件信息fr.onload = function(){//fr.result就是讀取的圖片文件box.innerHTML = '<img src="'+fr.result+'" alt="">'}}) </script>?
簡(jiǎn)單的圖片上傳預(yù)覽功能實(shí)現(xiàn)
轉(zhuǎn)載于:https://my.oschina.net/sprouting/blog/1573046
總結(jié)
- 上一篇： 《Zabbix-ICMP ping监控添
- 下一篇： 精进不休 .NET 4.0 (4) -