这个是预览单张图片的，如果要预览多张图片，改下面红色标记的地方就好了
<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实现单张图片（或者多张）的预览功能的更多相关文章

  1. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  2. JAVA图片批量上传JS-带预览功能

    这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能.直接贴代码吧,都有注释,很好理解. HTML页面 <!DOCTYPE html> <%@ taglib prefix=& ...

  3. 微信小程序实现图片是上传、预览功能

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

  4. JQ图片文件上传之前预览功能

    1.先准备一个div onchange触发事件 <input  type="file" onchange="preview(this)" >< ...

  5. jquery实现图片上传前本地预览功能

    HTML <img id="pic" src="" > <input id="upload" name="fil ...

  6. 前台图片上传展示JS（单张图片展示）

    <script type="text/javascript">    //下面用于多图片上传预览功能    function setImagePreviews(aval ...

  7. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  9. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

随机推荐

  1. 360你吃屎啊你，hao123,12345等等

    请看到这个文章的小伙伴将文章看完,看看我的感受是有多深,谢谢了 现在浏览器已经是人们经常用的东西,相信都有时不时就差度娘的习惯吧 也就是说每个人都有自己喜欢的主页 可电脑有时候就是遭不住,360什么的 ...

  2. mysql5.6 rpm安装配置

    检查MySQL及相关RPM包,是否安装,如果有安装,则移除(rpm –e 名称)   [root@localhost share]# rpm -qa | grep -i mysql MySQL-cli ...

  3. netty心跳机制测试

    netty中有比较完善的心跳机制,(在基础server版本基础上[netty基础--基本收发])添加少量代码即可实现对心跳的监测和处理. 1 server端channel中加入心跳处理机制 // Id ...

  4. Spring与Mybatis整合

    一 概述 1.整合的目的 将Mapper映射器的创建任务交给Spring容器. 二 具体实现 1.创建sqlSessionFactory: <bean id="sqlSessionFa ...

  5. 页面中的平滑滚动——smooth-scroll.js的使用

    正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...

  6. MySQL分页优化中的“INNER JOIN方式优化分页算法”到底在什么情况下会生效？

    本文出处:http://www.cnblogs.com/wy123/p/7003157.html 最近无意间看到一个MySQL分页优化的测试案例,并没有非常具体地说明测试场景的情况下,给出了一种经典的 ...

  7. 上下文Context详细介绍

    1.先看看它的继承结构,下图可以看出Context首先是一个抽象类,继承了Object,Activity,Service,Application都继承了它 2.API中对它的描述: @1Context ...

  8. javamail 邮件格式再优化(由详情——>改为统计)

    前言:之前扩展的ant-jmeter支持邮件附件形式上传以及邮件内容的html文件格式. 如图: 由于邮件的内容格式是详情信息,也就是说直观的显示的是case,但由于case的增加,邮件内容越来越大! ...

  9. mac os 安装 python 环境

    1.我们先获取pip安装脚本: 1 wget https://bootstrap.pypa.io/get-pip.py 如果没有安装wget可以去这里将所有内容复制下来,新建get-pip.py文件, ...

  10. [1] Spring.Net

    开发框架之Spring.Net