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& ...
随机推荐
- 从计算机语言的发展到我的第一行代码（HelloWorld）
程序:为了让计算机执行某些操作或解决某个问题而编写的一系列有序指令的集合 算法:解决问题的具体方法和步骤 流程图是算法的一种图形化表示方式. 流程图直观.清晰,更有利于人们设计与理解算法. 它使用一组 ...
- hdu3622
hdu3622 题意 每回合给定两个坐标点,可以选择一个放置炸弹,自己决定炸弹的半径,问 n 个回合后,使炸弹半径最小值最大. 分析 存在对立关系:每回合只能选择一个地方放置炸弹.i 表示 第一个位置 ...
- Coursera 机器学习笔记（六）
主要为第八周内容:聚类(Clustering).降维 聚类是非监督学习中的重要的一类算法.相比之前监督学习中的有标签数据,非监督学习中的是无标签数据.非监督学习的任务是对这些无标签数据根据特征找到内在 ...
- Mavnen的几种依赖关系
学习mavnen的时候有几种依赖关系 首先,说一下maven的依赖关系用来干什么? 就是用来控制编译.测试.运行三种classpath的关系 1.compile 的范围 当依赖的scope为compi ...
- 关于XAMPP环境配置
关于XAMPP软件 * Apache - 软件服务器(运行PHP) * 启动失败 * 原因 - 端口号被占用 * 错误信息 - Error: Apache shutdown unexpectedly ...
- Xamarin开发笔记—WebView双项事件调用
1.Xamarin调用WebView: 原理:Xamarin.Forms WebView内置方法xx.Eval(..)可以调用到页面里面的js函数. WebView展示的代码如下: var htmlS ...
- Jexus部署.Net Core项目
Jexus Jexus 即 Jexus Web Server,简称JWS,是Linux平台上 的一款ASP.NET WEB服务器.它是 Linux.Unix.FreeBSD 等非Windows系统架设 ...
- 深入理解PHP对象注入
0x00 背景 php对象注入是一个非常常见的漏洞,这个类型的漏洞虽然有些难以利用,但仍旧非常危险,为了理解这个漏洞,请读者具备基础的php知识. 0x01 漏洞案例 如果你觉得这是个渣渣洞,那么请看 ...
- git常用命令，助你快速入门
git是程序员中最常用的版本控制工具,学会git的基本使用是十分重要,特别是在公司里面的协同开发,废话不多说,下面贴出常用的命令. 1.基本配置 # 既然git是多人协同的工具,别人要看到你提交代码的 ...
- v9.5.2上传缩略图/附件提示“undefined”
把phpcms\modules\attachment\attachments.php中将 if(empty($this->userid)){改成 ...