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 相关文章推荐
JQuery自定义事件的应用 JQuery最佳实践
Aug 01 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
php session和cookie使用说明
2010/04/07 PHP
php数组函数序列之asort() - 对数组的元素值进行升序排序,保持索引关系
2011/11/02 PHP
PHP实现无限极分类图文教程
2014/11/25 PHP
PHP+MySQL存储数据常见中文乱码问题小结
2016/06/13 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
window.ActiveXObject使用说明
2010/11/08 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
vue-router单页面路由
2017/06/17 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
Python 深入理解yield
2008/09/06 Python
Python FTP操作类代码分享
2014/05/13 Python
python对数组进行反转的方法
2015/05/20 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python实现淘宝购物系统
2019/10/25 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
加拿大最大的箱包及旅游配件零售商:Bentley Leathers
2017/07/19 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
县政府班子个人对照检查材料
2014/10/05 职场文书
作风建设剖析材料
2014/10/06 职场文书
工作失职检讨书500字
2014/10/17 职场文书
个人政治思想总结
2015/03/05 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers