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& ...
随机推荐
- Building [Security] Dashboards w/R & Shiny + shinydashboard（转）
Jay & I cover dashboards in Chapter 10 of Data-Driven Security (the book) but have barely mentio ...
- php 引用一点要小心使用
今天遇见一个问题,我两次循环都是用的 foreach($temp as $k=>&$v){ // 用引用直接替换数组值 } foreach($temp2 as $k=>$v){ / ...
- Activiti工作流几种驳回方式的实现与比较
最近公司做的一个项目要实现工作流程的收回,驳回等操作,而采用的工作流引擎并不支持驳回功能,这个项目恰好就我和一个实习生一块做,所以这个问题就落到我的头上来解决了... 客户提出的要求是驳回时要记录日志 ...
- cpp(第二章)
1. 函数参数空着,代表void 2. 换行符 endl(确保程序继续运行前刷新输出,将其立即显示在屏幕上)|| '\n' (不能保证,这意味着有些系统中,有时可能输入信息后才会出现) 3.小谈cou ...
- [转]以新浪为例浅谈XSS
随着网络时代的飞速发展,网络安全问题越来越受大家的关注,而SQL注入的攻击也随着各种防注入的出现开始慢慢的离我们而去,从而XSS跨站脚本攻击也慢慢的开始在最近几年崛起,也应对了’没有绝对的安全’这句话 ...
- Dalvik详解
整理自百度百科 Dalvik Dalvik是Google公司自己设计用于Android平台的Java虚拟机.Dalvik虚拟机是Google等厂商合作开发的Android移动设备平台的核心组成部分之一 ...
- 几个常用的linux命令(操作服务器时会用到)
目录 tmux 背景 安装 使用 启动一个tmux session 暂时离开当前session 回到之前的session 重命名session 创建window 创建pane ps scp 参考 tm ...
- DDD理论学习系列（7）-- 值对象
DDD理论学习系列--案例及目录 1.引言 提到值对象,我们可能立马就想到值类型和引用类型.而在C#中,值类型的代表是strut和enum,引用类型的代表是class.interface.delega ...
- css透明度的设置
Css代码 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: ...
- Mac, Linux中配置Latex中文字体
对于中文的latex文档,在Linux下一般可以使用系统自带的开源字体:文泉驿(WenQuanYi)来实现,即如下的最小例子,通过xelatex命令来编译即可生成中文文档. \documentclas ...