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

Javascript  

一个简单的实例，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>
  12. <script type="text/javascript">
  14.     var openFile = function(event) {
  16.         //target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
  17.         //IE下,event对象有srcElement属性,但是没有target属性;
  19.         //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
  21.         var input = event.target;
  23.         var reader = new FileReader();
  24.         //将文件读取为一段以 data: 开头的字符串
  25.         reader.readAsDataURL(input.files[0]);
  27.         reader.onload = function(){
  28.           var dataURL = this.result;
  29.           var output = document.getElementById('output');
  30.           output.src = dataURL;
  31.         };
  34.   };
  35. </script>
  36. </html>

<br>



评论 3

发表评论

1

123

123

4年前 · 福建 福州

1

1112222

13213213213

5年前 · 云南 昆明

点击排行

标签云

友情链接

Top