js实现单张图片（或者多张）的预览功能
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>js图片预览功能</title><script language=javascript>function previewFile() {//名字相应的也要改，在input的onchange="previewFile()"也要记得对应好 var preview = document.querySelector('img');//这个是在下面input框里面加入id="xx"，要写入xx的，要写成这样(‘#xx’) var file = document.querySelector('input[type=file]').files[0];//这个下标也相对应的来改，第一个的图片是下标是0，那么第二个图片的话，下标就要是1，以此类推 var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); } else { preview.src = ""; }}</script></head><body><input type="file" onchange="previewFile()"><br><img src="" height="200" width="300" alt="Image preview... id="xx"/></body></html><script language=javascript>
function showImg(fileid,target){//给2个参数，其他位置的参数名一致，值就进去了
var preview = document.querySelector('#'+target);//获取img元素,显示图片位置，根据el表达式('#'+target)
var file = document.querySelector('#'+fileid).files[0];//根据id拿到文件选择框里面的文件，
var reader = new FileReader();//创建FileReader接口（把文件放到图片预览框里面）
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
</script>
然后下面对应的input框
js实现单张图片（或者多张）的预览功能的更多相关文章
- 分离与继承的思想实现图片上传后的预览功能：ImageUploadView
本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...
- JAVA图片批量上传JS-带预览功能
这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...
- 微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...
- JQ图片文件上传之前预览功能
1.先准备一个div onchange触发事件 <input type="file" onchange="preview(this)" >< ...
- jquery实现图片上传前本地预览功能
HTML <img id="pic" src="" > <input id="upload" name="fil ...
- 前台图片上传展示JS（单张图片展示）
<script type="text/javascript"> //下面用于多图片上传预览功能 function setImagePreviews(aval ...
- 如何通过js实现图片预览功能
一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- 原生JS实现图片预览功能
html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...
随机推荐
- glmnetUtils: quality of life enhancements for elastic net regression with glmnet
The glmnetUtils package provides a collection of tools to streamline the process of fitting elastic ...
- Running R jobs quickly on many machines（转）
As we demonstrated in “A gentle introduction to parallel computing in R” one of the great things abo ...
- 【二】python内置类型
1.布尔类型 表示真假的类型(true和false) 数字 0.None,以及元素为空的容器类对象都可视作False,反之为 True. In [1]: bool(0) Out[1]: False I ...
- python脚本 随机定位坐标
import mathimport randomdef rad(dg): return (dg * math.pi / 180)def deg(rd): return (rd * 180 ...
- spring-boot开发：使用内嵌容器进行快速开发及测试
一.简述一下spring-boot微框架 1.spring-boot微框架是什么? 大家都知道,在使用spring框架进行应用开发时需要很多*.xml的初始化配置文件,而springBoot就是用来简 ...
- 带着问题写React Native原生控件--Android视频直播控件
最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijk ...
- 限制容器的 Block IO - 每天5分钟玩转 Docker 容器技术（29）
前面学习了如何限制容器对内存和CPU的使用,本节我们来看 Block IO. Block IO 是另一种可以限制容器使用的资源.Block IO 指的是磁盘的读写,docker 可通过设置权重.限制 ...
- 单人纸牌_NOI导刊2011提高（04）
单人纸牌 时间限制: 1 Sec 内存限制: 128 MB 题目描述 单人纸牌游戏,共 36 张牌分成 9 叠,每叠 4 张牌面向上.每次,游戏者可以从某两个不同的牌堆最顶上取出两张牌面相同的牌(如 ...
- noip借教室 题解
题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然 ...
- SQL Server 2012 酸爽的安装体验
电脑上已经安装了SQL Server 2008 R2,要想安装SQL Server 2012,必须先将已安装的SQL Server 2008 R2 安全卸载,否则安装过程中会报错! 使用到的卸载软件有 ...