【预览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. django-media隐射

    需要再主url.py中设置 from django.urls import include, path from django.conf.urls.static import static from ...

  2. 关于thinkphp3.1无法加载模块解决办法

    关于thinkphp3.1无法加载模块解决办法 如果没有具体的哪个模块的名字 请注意PHP的版本问题

  3. 8.Appium的基本使用-3（安装JDK、android-sdk）

    1.下载安装JDK :https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html安装教程参 ...

  4. hive grouping sets 实现原理

    先下结论: 看了hive 1.1.0 grouping sets 实现(从源码及执行计划都可以看出与kylin实现不一样),(前提是可累加,如sum函数)他并没有像kylin一样先按照group by ...

  5. [Writeup]与佛论禅

    [Writeup]与佛论禅 垂死梦中惊坐起,李sin参悟佛真意 看题 沙雕sl宋雷发给我一道题 他用(Quoted-Printable)解出来一个奇怪经文(偷学) 李sin你怎么看?此中必有蹊跷! 前 ...

  6. twisted reactor分析

    调用reactor.run(),就会调用到mainloop函数,从而调用到select或epoll,监控fd的读写. posixbase.py: def listenTCP(self, port, f ...

  7. MySQL把一个大表拆分多个表后,如何解决跨表查询效率问题

    大表分表后每个表的结构相同,可以用sql的union 比如a,b表结构相同可以通过union来联接 select * from aunion allselect * from bwhere.... 其 ...

  8. [转]USB之Part 4 - Protocol

    原地址http://www.usbmadesimple.co.uk/ums_4.htm Controlling a Device Before we go into detail, we need t ...

  9. inno setup 安装前判断进程是否存在，以及停止相应进程<转>

    打包的时候遇到了这样的需求:假似用户都是傻瓜                  式操作,如果更新安装程序的时候,之前的老程序还在运行这个时候如果你去提示让用户吧老程序手动退掉也不现实. 所以当遇到这种 ...

  10. 用URL传递参数

    用URL传递参数,在园子里找到一篇文章解决了自己的问题,地址如下:http://www.cnblogs.com/lolicon/archive/2009/01/19/1378408.html