【预览InputFile】

　　通过input的files属性，可以取到选择的File对象，通过FileReader可以将File对象读取出来。

<body>

<input type="file" id='file'; onchange="c()">

<img src="" id='show'>

</body>

<script type="text/javascript">

function c () {

var r= new FileReader();

f=document.getElementById('file').files[0];

r.readAsDataURL(f);

r.onload=function  (e) {

document.getElementById('show').src=this.result;

};

}

</script>

参考：https://zhidao.baidu.com/question/872147854254047812.html

预览InputFile的更多相关文章

  1. JSP实现word文档的上传，在线预览，下载

    前两天帮同学实现在线预览word文档中的内容,而且需要提供可以下载的链接!在网上找了好久,都没有什么可行的方法,只得用最笨的方法来实现了.希望得到各位大神的指教.下面我就具体谈谈自己的实现过程,总结一 ...

  2. js实现图片预览

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. 借助flexpaper实现word在线预览和打印

    为了实现word能够在web上尽量以原始的排版样式展现出来,选择基于activex控件的方式太过于依赖某种浏览器,并且存在可能需要花费金钱购买相应的控件产品:于是借助flexpaper这种flash展 ...

  4. 使用jodconverter和swftools实现文件在线预览

    参考:仿百度文库解决方案(四)——利用JODConverter调用OpenOffice.org服务转换文档为PDF 文档在线预览主要用到如下两个工具 1,安装openoffice(同时下载jodcon ...

  5. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  6. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  7. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  8. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  9. Java实现在线预览功能

    java实现在线预览功能,需要用到  jacob.dll jacob.jar   预览pdf所需js  pdfobject.min.js 将上传文件转为pdf保存. <div class=&qu ...

随机推荐

  1. rsyncd

    rsync是一个快速.通用的文件复制工具.支持两种工作模式:基于shell的传输.基于服务的传输.1.配置文件 rsyncd.conf文件由模块及其参数构成.模块由方括号包裹模块名称,直到下一个模块结 ...

  2. [Lua]table(一)：打印与复制

    一.打印table function PrintTable(tb) if type(tb) ~= "table" then print(tb) return end local c ...

  3. 17.docker及scrapy-splash安装-1

    docker 安装网址: https://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 这就安装成功了!!!

  4. ARP 欺骗攻击与防御

    <一> ARP攻防 理论 和 工具 工具: 01: Wireshark ( 抓包软件 )   02: P2P终结者 ( ARP欺骗工具 )   03: cain & abel  ( ...

  5. node.js 递归创建多级目录

    fs.mkdir只能创建一级目录,所以我们可以自定义一个mkdirs函数,利用递归和回调来实现创建多级目录. function mkdirs(dirname, callback) { //检测目录是否 ...

  6. 在ls命令中使用通配符

    通配符比较简单.我们已经知道通配符常常是在shell终端中用来匹配文件名的,今天来看一下在ls命令中使用通配符的例子. 用法:ls [选项]... [文件]... ls本身也有很多的选项,我们今天不看 ...

  7. java 父类引用指向子类对象---动态绑定

    知识点: 1.java 中父类引用指向子类对象时动态绑定针对的只是子类重写的成员方法: 2.父类引用指向子类对象时,子类如果重写了父类的可重写方法(非private.非 final 方法),那么这个对 ...

  8. linux集群时间同步搭建

    http://xstarcd.github.io/wiki/sysadmin/ntpd.html http://www.voidcn.com/blog/xuxudede1989/article/p-4 ...

  9. git异常

    1.  SSL certificate problem: self signed certificate 因git默认是ssl方式验证,在采用http请求时,是使用的账号密码方式,因此需要git放行. ...

  10. APP-8.2-Postman应用

    用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介绍的这款网页调试工具不仅可以 ...