【预览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. MySQL 全局锁、表锁以及行锁

    1. 系统版本 MySQL 5.7.25 ubuntu 16.04 2. 全局锁 全局锁即对整个数据库实例加锁,使得整个库处于只读状态,会阻塞DML和DDL语句.使用如下命令(简称FTWRL)可为数据 ...

  2. CentOS7最小化安装-Linux-1

    CentOS 7的安装其实很简单,主要是网络配置. 选英文.设置时区等 最小化安装 先启动一个网络 Begin 吧 在安装的时候设置好root密码.很简单 别去点安装tools. 等待安装完成后,点击 ...

  3. Linux 创建用户并赋予 Sudo 权限

    01,创建账号 => useradd admin 02,赋予密码 => passwd admin 03,修改 sudo 权限文件,使得该用户可以使用 sudo 命令 vim /etc/su ...

  4. MonGoDB 常见操作, 设置管理员和用户登入

    [ 启动客户端 => ./bin/mongo --host 192.168.200.100 ] 1: 查看所有已经创建的数据库  =>  show dbs   2: 切换或者创建数据库   ...

  5. <基础> PHP 进阶之 函数（Function）

    引用参数 $name = "eko"; function chang_name(&$name){ $name .= '_after_change'; } chang_nam ...

  6. delphi 调用 c++builder

    delphi 调用 c++builder c++builder 调用delphi 混合调用,mix https://community.embarcadero.com/blogs/entry/mixi ...

  7. PHP5 的五种常用模式

    PHP5 的五种常用模式. 工厂模式 最初在设计模式 一书中,许多设计模式都鼓励使用松散耦合.要理解这个概念,让我们最好谈一下许多开发人员从事大型系统的艰苦历程.在更改一个代码片段时,就会发生问题,系 ...

  8. vector 内存释放相关

    在使用vector 存储char 类型时 new的数据 在vecto 执行rerase的时候或者 单项执行clear 内存是不能被释放的. 比如有下面的一个测试: class SnapshotInfo ...

  9. setTimeout闭包常见问题

    经常会遇到这样的问题,setTimeout按序输出循环数字,而不是最后输出同一个数字: 题目: for (var i = 0; i < 5; i++) { setTimeout(function ...

  10. spring-mvc.xml与spring-mybatis.xml配置文件中命名空间问题

    首先贴出配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...