【预览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. 前端通过js-xlsx获取Excel完整数据

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. FreeMarker生成Word文档

    FreeMarker简介: FreeMarker是一款模板引擎:即一种基于模板和要改变的数据,并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具,它不是面向最终用户的,而是一个 ...

  3. <转载> FreeNAS的安装和简单配置 http://freenas.cn/?p=342

    前些日子在公司搭了一个模拟生产环境的平台.由于是测试环境,资源有限只能使用虚拟机实现,所以存储这块就想到了使用FreeNAS.很早以前玩儿过几次,当时是生产环境需要上存储设备,经过对比还是选择的更可靠 ...

  4. LabelFunction 允许在显示数据以前进行处理

    <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...

  5. JSP创建用户验证的实例

    1 显示中文的代码编码解决办法: <%@ page language="java" import="java.util.*" pageEncoding=& ...

  6. CSS3 过渡动画

    实现如下效果:当鼠标移动到图片上是图片有类似于放大镜放大的效果 transition : CSS属性 时间 当transition中监测的css属性发生变化时,会触发动画 .img_box img{ ...

  7. Linux 用户、权限

    用户:uid  保存在 /etc/passwd 用户分类: 管理员 uid--0 普通用户 --系统用户 uid 1-499 --一般用户  uid 500-60000 组:gid  保存在/etc/ ...

  8. linux驱动开发第一步hello

    先查看Ubuntu的版本 cat /etc/issue lin@lin-virtual-machine:~$ cat /etc/issue Ubuntu 12.04 LTS \n \l 或者使用 li ...

  9. day10-列表生成式

    列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 1.生成一个列表 a = [i for i in range(1,100) if ...

  10. CSS GRID ESSENTIALS

    CSS GRID ESSENTIALS Review At this point, we've covered a great deal of different ways to manipulate ...