用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果:

FileReader 的 readAsDataURL()

先创建一个img标签,再用 fileReader 把input文件的赋值到img的src即可

具体代码如下:

function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader(); reader.onloadend = function () {
preview.src = reader.result;
} if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

查看效果: https://codepen.io/skura23/pen/aWBGBJ

Js实现input上传图片并显示缩略图的更多相关文章

  1. input上传图片并显示

    html: <div id="click"><img> </div><!--照片预览的div --> <div class=& ...

  2. Js上传图片并生成缩略图

    Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...

  3. MVC图片上传并显示缩略图

    前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...

  4. C#上传图片和生成缩略图以及图片预览

    因工作需要,上传图片要增加MIME类型验证和生成较小尺寸的图片用于浏览.根据网上代码加以修改做出如下效果图: 前台代码如下: <html xmlns="http://www.w3.or ...

  5. PHP.24-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图

    添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace ...

  6. 使用jQuery在上传图片之前实现缩略图预览

    使用jQuery在上传图片之前实现缩略图预览 jQuery代码 01 $("#uploadImage").on("change", function(){ 02 ...

  7. MVC4 上传图片并生成缩略图

    Views @using (Html.BeginForm("Create","img",FormMethod.Post, new { enctype = &qu ...

  8. COS上传图片和显示图片

    写这篇文章之前,我也是刚刚实现COS上传和显示图片.我百度了好多相关文章,COS上传图片成功的文章不少,上传后显示图片的文章几乎没有.于是写一篇记录下. COS上传图片推荐链接:https://blo ...

  9. selenium web driver 使用JS修改input属性

    selenium获取input时候,发现type=”hidden” 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit ...

随机推荐

  1. js阻止事件冒泡的两种方法

    1.什么是JS事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这 ...

  2. Ubuntu 中使用git 上传代码

    现在很多人都愿意把自己的代码分享给大家,所以有很多的代码管理的软件 ,比如SVN Git 等软件.今天就讲一下  git 的简单的应用,上传代码.用 git 上传代码 要有个git 账号,这是必不少的 ...

  3. poj 1364 King(线性差分约束+超级源点+spfa判负环)

    King Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14791   Accepted: 5226 Description ...

  4. 网络对抗技术 2017-2018-2 20152515 Exp6 信息搜集与漏洞扫描

    1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法.包括: (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的 ...

  5. 20155313 杨瀚 《网络对抗技术》实验八 Web基础

    20155313 杨瀚 <网络对抗技术>实验八 Web基础 一.实验目的 1.Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含 ...

  6. 20155330 《网络对抗》 Exp6 信息搜集与漏洞扫描

    20155330 <网络对抗> Exp6 信息搜集与漏洞扫描 基础问题回答 哪些组织负责DNS,IP的管理? 互联网名称与数字地址分配机构(The Internet Corporation ...

  7. 20155339 Exp3 免杀原理与实践

    20155339 Exp3 免杀原理与实践 基础问题 (1)杀软是如何检测出恶意代码的? 基于特征码的检测(杀软的特征库中包含了一些数据或者数据段,杀软会尽可能的更新这个特征库,以包括尽可能多的恶意代 ...

  8. Linux环境中Qt程序的手工发布

    Linux环境中Qt程序的手工发布

  9. 利用Python实现App自动签到领取积分

    要自动签到,最简单的是打开页面分析请求,然后我们用脚本实现请求的自动化.但是发现食行没有页面,只有 APP,这不是一个好消息,这意味着需要抓包处理了. 有需要Python学习资料的小伙伴吗?小编整理[ ...

  10. 科普贴 | 以太坊网络中的Gas Limit 和 Gas Price 是什么概念?

    接触以太坊的同学都听过 Gas/ Gas Price/ Gas Limit,那么这些词汇究竟是什么意思? 还有,为什么有时候你的ETH转账会很慢?如何提高ETH转账速度? Ethereum平台 Vit ...