JavaScript使用FileReader对象实现图片上传预览

一个简单的实例,JavaScript实现图片上传预览。

代码如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <input type='file' onchange='openFile(event)'><br>
  9. <img id='output'>
  10. </body>
  11. <script type="text/javascript">
  12. var openFile = function(event) {
  13. //target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
  14. //IE下,event对象有srcElement属性,但是没有target属性;
  15. //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
  16. var input = event.target;
  17. var reader = new FileReader();
  18. //将文件读取为一段以 data: 开头的字符串
  19. reader.readAsDataURL(input.files[0]);
  20. reader.onload = function(){
  21. var dataURL = this.result;
  22. var output = document.getElementById('output');
  23. output.src = dataURL;
  24. };
  25. };
  26. </script>
  27. </html>

<br>



评论 2

发表评论


1

123

123

1年前 · 福建 福州


1

1112222

13213213213

1年前 · 云南 昆明

Top