【预览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. 自动化运维工具----ansible

    ansible是新出现的运维工具是基于Python研发的糅合了众多老牌运维工具的优点实现了批量操作系统配置.批量程序的部署.批量运行命令等功能. 主要模块以及功能: 1 command 2 user ...

  2. ant编译时提示一大堆软件包不存在的问题

    ant编译时提示一大堆软件包不存在的问题  解决方案: 把项目的 lib 里的jar包 放的 jdk的jre的ext的目录下 例如 java home 是 D:JavaEEJavajdk1.8.0_1 ...

  3. 38.spiderkeeper的配置

    配置spiderkeeper管理scrapy爬虫 1.安装所需文件包pip install spiderkeeper pip install scrapyd pip install scrapy_cl ...

  4. rem布局js实现

    (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement ...

  5. idea 设置某项目路径下的文件在点击浏览器预览时的前缀

    01,我们在开发 HTML 页面的时候,可以通过点击右上角的浏览器图标,直接打开浏览器访问,大大方便了开发 02,但是我们在开发 PHP 的时候,一般会自己安装集成环境或者编译环境,从上面的截图我们会 ...

  6. Django权限auth模块详解

    转自:http://www.cnblogs.com/Finley/p/5575305.html 1,auth模块是Django提供的标准权限管理系统,可以提供用户身份认证,用户组和权限管理 2,aut ...

  7. Erlang Error Records

    1.No match of right hand value ... Erlang变量名需要以大写开头.

  8. docker之手动构建新的镜像

    转自:https://www.cnblogs.com/jsonhc/p/7766561.html 查看本地现有镜像: [root@docker ~]# docker images REPOSITORY ...

  9. 访问Nginx报错

    今天新装Nginx,一切妥善后,访问虚拟机服务器的IP,结果发现响应超时 这是因为防火墙的80端口没有打开,在新装的Linux上搭服务器一般会遇到这个问题,重新开放80端口即可解决: (1)firew ...

  10. Linux 完整卸载oracle和grid软件

    本文主要描述如何在Linux下完全卸载oracle和grid软件. 操作环境 SuSE11 oracle用户完整删除操作步骤 1.登录oracle用户,停止Oracle数据库监听和数据库实例 orac ...