【预览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. 【Selenium-WebDriver自学】Selenium TestNG（十四）

    ==================================================================================================== ...

  2. uva-10763-交换生

    题意:有一个交换生由A->B,想交换得有一个B->A,问,是不是所有人都能交换成. 俩个数字交换偶数次还是自身,开一个数组mark,模拟完所有样例后,看数组是不是还是初始化数组. #inc ...

  3. Http协议基础知识

    r equest POST https://re.csdn.net/csdnbi HTTP/1.1方法 url/uri 协议的版本号 1.1Host: re.csdn.netConnection: k ...

  4. STM32F105开发板

  5. 机器学习入门-数值特征-数据四分位特征 1.quantile(用于求给定分数位的数值) 2.plt.axvline(用于画出竖线) 3.pd.pcut(对特征进行分位数切分，生成新的特征)

    函数说明: 1.  .quantile(cut_list) 对DataFrame类型直接使用,用于求出给定列表中分数的数值,这里用来求出4分位出的数值 2.  plt.axvline()  # 用于画 ...

  6. day06-三元表达式

    python中没有其他语言中的三元表达式,不过有类似的实现方法 其他语言中,例如java的三元表达式是这样int a = 1;String b = "";b = a > 1? ...

  7. SAFESEH 映像是不安全的

    1.打开该项目的“属性页”对话框 2.然后单击“链接器”--“命令行”,出现如下界面 3.将 /SAFESEH:NO 复制到“其它选项(D)”框中,然后点击应用 返回VS2013,重新编译运行程序即可 ...

  8. cxgrid合并值相同的某列

    设置 cxGrid 的某列的 CellMerging 属性可使这一列相同值的单元格合并. 1)cxGridDBTableViewColumn1.Options.CellMerging:=true  2 ...

  9. Sql Server中日期时间格式化为字符串输出

    在SQL Server数据库中,SQL Server日期时间格式转换字符串可以改变SQL Server日期和时间的格式,是每个SQL数据库用户都应该掌握的.本文我们主要就介绍一下SQL Server日 ...

  10. libcurl+OpenSSL 库分享

    首先,我要感谢这两个博客给我的帮助: https://www.cnblogs.com/findumars/p/7496122.html https://blog.csdn.net/yannanxiu/ ...