图片上传预览
2019獨角獸企業重金招聘Python工程師標準>>>
<!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對象來讀取這個文件，顯示在DIV當中var file = this.files[0];//1. 創建對象var fr = new FileReader();// 2. 讀取文件fr.readAsDataURL(file);//3. 當文件讀取完畢 之后，獲取文件信息fr.onload = function(){//fr.result就是讀取的圖片文件box.innerHTML = '<img src="'+fr.result+'" alt="">'}}) </script>?
簡單的圖片上傳預覽功能實現
轉載于:https://my.oschina.net/sprouting/blog/1573046
總結
- 上一篇： 《Zabbix-ICMP ping监控添
- 下一篇： 精进不休 .NET 4.0 (4) -