文档章节

通过 html5 FileReader 实现上传图片预览功能

furw
 furw
发布于 2015/08/18 13:27
字数 77
阅读 1524
收藏 7

Html 部分

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>

    <body>

        <input type="file" name="file" onchange="showPreview(this)" />
        <img id="portrait" src="" width="70" height="75">
    </body>

</html>


JS部分

<script type="text/javascript">
    function showPreview(source) {
        var file = source.files[0];
        if (window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
                document.getElementById("portrait").src = e.target.result;
            };
            fr.readAsDataURL(file);
        }
    }
</script>




© 著作权归作者所有

furw
粉丝 18
博文 44
码字总数 14655
作品 0
海淀
前端工程师
私信 提问
FileReader实现上传图片前本地预览

  平时做图片上传预览时如果没有特殊的要求就直接先把图片传到后台去,成功之后拿到URL再渲染到页面上。或者使用前端插件。这篇博客使用的是HTML5的新特性——FileReader。由于兼容性,这种...

辛月
2018/08/19
0
0
走进HTML5-实现网站中常见的拖拽上传文件

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等 当我们学习了 HTML 提供的原生拖放(drag & drop)后,是时候想一想这个东西可以用来作什么,可以在什么时候使用,使用的场景等等 ...

Lambda_
10/08
0
0
HTML5之FileReader的使用

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单,可以按照如下步骤...

文文1
2015/08/06
6.4K
0
纯 HTML5 实现的文件上传

今天我们将开发一个很强大的 HTML5 的文件上传功能,并有上传进度提示以及预览,这是一个基于 jQuery 的解决方案,我们将使用 HTML5 的 FileReader 实现在浏览器上的文件预览,并使用 XMLHtt...

红薯
2011/12/11
55.9K
51
获取上传图片路径方法(新旧方法)

旧方法 //获取上传图片路径1function fileComment(obj) { /获取input=file图片路径/ var objUrl = getObjectURL(obj.files[0]); if (objUrl) { return objUrl; }}//获取上传图片路径2functi......

胡雨生
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Netty整合Protobuffer

现在我们都知道,rpc的三要素:IO模型,线程模型,然后就是数据交互模型,即我们说的序列化和反序列化,现在我们来看一下压缩比率最大的二进制序列化方式——Protobuffer,而且该方式是可以跨...

算法之名
22分钟前
13
0
如何用C++实现栈

栈的定义 栈(stack)又名堆栈,它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶,相对地,把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压...

BWH_Steven
41分钟前
4
0
编程作业20190210900169

1编写一个程序,提示用户输入名和姓,然后以“名,姓”的格式打印出来。 #include <stdio.h>#include <stdlib.h> int main(){ char firstName[20]; char lastName[20]; print......

1李嘉焘1
53分钟前
12
0
补码的优点及原理分析

只讨论整数 1.计算机内部为什么没有减法器? 减法运算本身其实就是加法,如x - y即x +(-y),所以只需要将负数成功表示出来并可以参加加法运算,那加法器就可同时实现“+”和“-”的运算。这...

清自以敬
今天
76
0
Docker 可视化管理 portainer

官网安装指南: https://portainer.readthedocs.io/en/latest/deployment.html docker-compose.yml 位置,下载地址:https://downloads.portainer.io/docker-compose.yml...

Moks角木
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部