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

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

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type='file' onchange='openFile(event)'><br>
    <img id='output'>
</body>

<script type="text/javascript">

    var openFile = function(event) {

        //target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。
        //IE下,event对象有srcElement属性,但是没有target属性;

        //Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的
        
        var input = event.target;

        var reader = new FileReader();
        //将文件读取为一段以 data: 开头的字符串
        reader.readAsDataURL(input.files[0]);
        
        reader.onload = function(){
          var dataURL = this.result;
          var output = document.getElementById('output');
          output.src = dataURL;
        };
        

  };
</script>
</html>


查看原文>> 曼巴童鞋 - 博客 - JavaScript使用FileReader对象实现图片上传预览

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,663评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,259评论 4 61
  • 卢水芹158,130斤,新交了个瘦瘦的男友,很喜欢,不过水芹对自己身材一直不够自信。她常问起男友唐浩文,你喜欢胖胖...
    南方文艺_北楼阅读 793评论 0 1
  • 如果您也对吸引力法则感兴趣,想要交流以上内容,想要实现轻而易举的富足,想要每天都有好心情,有良好的人际关系,想要金...
    富足的土豆儿阅读 452评论 0 0
  • 2017.8.20 星期日 晴 今天下午和儿子相处时,小家伙给我讲了《水孩子》。 小家伙讲了汤姆从顽劣...
    暖与希望阅读 179评论 0 1