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 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
js实现上传图片及时预览
May 07 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 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
虫族 ZERG 概述
2020/03/14 星际争霸
php中的MVC模式运用技巧
2007/05/03 PHP
php intval的测试代码发现问题
2008/07/27 PHP
ajax php 实现写入数据库
2009/09/02 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JavaScript进阶练习及简单实例分析
2016/06/03 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
layer插件select选中默认值的方法
2018/08/14 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Django框架请求生命周期实现原理
2020/11/13 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
zooplus波兰:在线宠物店
2019/07/21 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
学校大课间活动方案
2014/01/30 职场文书
社区志愿者活动总结
2014/06/26 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2015年大学生工作总结
2015/04/21 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
24年收藏2000多部退役军用电台
2022/02/18 无线电