javascript实现input file上传图片预览效果


Posted in Javascript onDecember 31, 2015

本文实例介绍了javascript实现input file上传图片预览效果的详细代码,分享给大家供大家参考,具体内容如下

运行效果图:

javascript实现input file上传图片预览效果

具体实现代码:

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

 <style type="text/css">
  .imgbox,.imgbox1
  {
   float: left;
   margin-right: 20px;
   margin-top: 20px;
   position: relative;
   width: 182px;
   height: 142px;
   border: 1px solid red;
   overflow: hidden;
  }
  .imgbox1{border: 1px solid blue;
  }


  .imgnum{
   left: 0px;
   top: 0px;
   margin: 0px;
   padding: 0px;
  }
  .imgnum input,.imgnum1 input {
   position: absolute;
   width: 182px;
   height: 142px;
   opacity: 0;
  }
  .imgnum img,.imgnum1 img {
   width: 100%;
   height: 100%;
  }
  .close,
  .close1 {
   color: red;
   position: absolute;
   left: 170px;
   top: 0px;
   display: none;
  }





 </style>
</head>

<body>
<div id="img">
<div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div><div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div>
<div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div>
<div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div>
<div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div>
<div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div>
<div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div>
<div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div> <div class="imgbox">
 <div class="imgnum">
  <input type="file" class="filepath" />
  <span class="close">X</span>
  <img src="btn.png" class="img1" />
  <img src="" class="img2" />
 </div>
</div>



<div class="imgbox1">
 <div class="imgnum">
  <input type="file" class="filepath1" />
  <span class="close1">X</span>
  <img src="btn.png" class="img11" />
  <img src="" class="img22" />
 </div>
</div>

</div>

</body>
<script type="text/javascript">
 $(function() {
  $(".filepath").on("change",function() {
   alert($('.imgbox').length);
   var srcs = getObjectURL(this.files[0]); //获取路径
   $(this).nextAll(".img1").hide(); //this指的是input
   $(this).nextAll(".img2").show(); //fireBUg查看第二次换图片不起做用
   $(this).nextAll('.close').show(); //this指的是input
   $(this).nextAll(".img2").attr("src",srcs); //this指的是input
   $(this).val(''); //必须制空
   $(".close").on("click",function() {
    $(this).hide();  //this指的是span
    $(this).nextAll(".img2").hide();
    $(this).nextAll(".img1").show();
   })
  })
 })




 function getObjectURL(file) {
  var url = null;
  if (window.createObjectURL != undefined) {
   url = window.createObjectURL(file)
  } else if (window.URL != undefined) {
   url = window.URL.createObjectURL(file)
  } else if (window.webkitURL != undefined) {
   url = window.webkitURL.createObjectURL(file)
  }
  return url
 };





 $(function() {
  $("#img").on("change",".filepath1",function() {
   //alert($('.imgbox1').length);
   var srcs = getObjectURL(this.files[0]); //获取路径
   alert(srcs);
   //this指的是input
   /* $(this).nextAll(".img22").attr("src",srcs); //this指的是input
    $(this).nextAll(".img22").show(); //fireBUg查看第二次换图片不起做用*/
   var htmlImg='<div class="imgbox1">'+
     '<div class="imgnum1">'+
     '<input type="file" class="filepath1" />'+
     '<span class="close1">X</span>'+
     '<img src="btn.png" class="img11" />'+
     '<img src="'+srcs+'" class="img22" />'+
     '</div>'+
     '</div>';

   $(this).parent().parent().before(htmlImg);
   $(this).val(''); //必须制空
   $(this).parent().parent().prev().find(".img11").hide(); //this指的是input
   $(this).parent().parent().prev().find('.close1').show();

   $(".close1").on("click",function() {
    $(this).hide();  //this指的是span
    $(this).nextAll(".img22").hide();
    $(this).nextAll(".img11").show();
    if($('.imgbox1').length>1){
     $(this).parent().parent().remove();
    }

   })
  })
 })

</script>

</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
js更优雅的兼容
Aug 12 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
layui分页效果实现代码
May 19 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
JS实现HTML页面中动态显示当前时间完整示例
Jul 30 Javascript
浅谈React之状态(State)
Sep 19 Javascript
js实现随机8位验证码
Jul 24 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
Java无向树分析 实现最小高度树
Apr 09 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 #Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 #Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 #Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
Dec 31 #Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 #Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 #Javascript
javascript数据类型验证方法
Dec 31 #Javascript
You might like
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
Use Word to Search for Files
2007/06/15 Javascript
Javascript 继承机制实例
2009/08/12 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python处理json数据中的中文
2014/03/06 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Django Web开发中django-debug-toolbar的配置以及使用
2018/05/06 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
python爬虫开发之使用Python爬虫库requests多线程抓取猫眼电影TOP100实例
2020/03/10 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
python 实现图片批量压缩的示例
2020/12/18 Python
Ibatis的核心配置文件都有什么
2014/09/08 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
高中数学教师求职信
2013/10/30 职场文书
网络维护管理员的自我评价分享
2013/11/11 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
售后专员岗位职责
2013/12/08 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL