Js实现input上传图片并显示缩略图
用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果:
先创建一个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上传图片并显示缩略图的更多相关文章
- input上传图片并显示
html: <div id="click"><img> </div><!--照片预览的div --> <div class=& ...
- Js上传图片并生成缩略图
Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...
- MVC图片上传并显示缩略图
前面已经说了怎么通过MVC来上传文件,那么这次就说说如何上传图片然后显示缩略图,这个的实用性还是比较大.用UpLoad文件夹来保存上传的图片,而Temp文件夹来保存缩略图,前面文件上传部分就不再重复了 ...
- C#上传图片和生成缩略图以及图片预览
因工作需要,上传图片要增加MIME类型验证和生成较小尺寸的图片用于浏览.根据网上代码加以修改做出如下效果图: 前台代码如下: <html xmlns="http://www.w3.or ...
- PHP.24-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图
添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace ...
- 使用jQuery在上传图片之前实现缩略图预览
使用jQuery在上传图片之前实现缩略图预览 jQuery代码 01 $("#uploadImage").on("change", function(){ 02 ...
- MVC4 上传图片并生成缩略图
Views @using (Html.BeginForm("Create","img",FormMethod.Post, new { enctype = &qu ...
- COS上传图片和显示图片
写这篇文章之前,我也是刚刚实现COS上传和显示图片.我百度了好多相关文章,COS上传图片成功的文章不少,上传后显示图片的文章几乎没有.于是写一篇记录下. COS上传图片推荐链接:https://blo ...
- selenium web driver 使用JS修改input属性
selenium获取input时候,发现type=”hidden” 的input无法修改value,经牛人指点,可以使用js修改 首先html源文件如下,设置为text .hidden.submit ...
随机推荐
- OpenCV——ROI截取、线性混合、通道分离、合并、亮度对比度调整
#include <opencv2/opencv.hpp> #include <iostream> using namespace cv; using namespace st ...
- ICC2 常用命令
1. 关于 data preparation : report_ref_libs : report reference library report_lib lib_aa : report the ...
- python下载安装搭建
python官网下载python运行环境(https://www.python.org/downloads/),建议下载稳定版本,不推荐使用最新版本 安装 然后我们打开CMD,在里面输入python, ...
- 浅拷贝与深拷贝的实现方式、区别;deepcopy如果你来设计,如何实现(一)
浅拷贝与深拷贝的实现方式.区别:deepcopy如果你来设计,如何实现: copy浅拷贝:没有拷贝子对象,所以原始数据改变,子对象改变 deepcopy深拷贝:包含对象里面的子对象的拷贝,所以原始对象 ...
- 为什么重写equals还要重写hashcode??
equals和hashcode是object类下一个重要的方法,而object类是所有类的父类,所以所有的类都有这两个方法 equals和hashcode间的关系: 1.如果两个对象相同(即equal ...
- 第13章 GPIO—位带操作
第13章 GPIO—位带操作 全套200集视频教程和1000页PDF教程请到秉火论坛下载:www.firebbs.cn 野火视频教程优酷观看网址:http://i.youku.com/fire ...
- 福慧双修&探险 BZOJ4398&BZOJ2407
分析: 双倍经验(数据范围不同). 我们考虑,我们必定是从1走一条边到节点i,之后从i到j跑最短路,之后再从j到1走另一条边的情况下,不会重复,并且是答案.那么我们考虑预处理出pre[i]表示从1走到 ...
- mock使用中出现的错误
当出现错误Class mocking requires to have objenesis library in the classpath时,缺少了objenesis库文件...下载objenesi ...
- Android WebView漏洞(转)
一.漏洞描述 近期,微信等多款安卓流行应用曝出高危挂马漏洞:只要点击好友消息或朋友圈中的一条网址,手机就会自动执行黑客指令,出现被安装恶意扣费软件.向好友 发送欺诈短信.通讯录和短信被窃取等严重后果. ...
- 2017-2018 Exp9 网络欺诈技术防范 20155214
目录 Exp9 网络欺诈技术防范 实验内容 Webgoat General Access Control Flaws Crossing-Site Scripting Injection Flaws 知 ...