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 相关文章推荐
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
一文搞懂redux在react中的初步用法
Jun 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
20个PHP常用类库小结
2011/09/11 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP中的use关键字概述
2014/07/23 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
Python 面向对象 成员的访问约束
2008/12/23 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
Python Flask-web表单使用详解
2017/11/18 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python一键去抖音视频水印工具
2018/09/14 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
pandas的排序和排名的具体使用
2019/07/31 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
教师旷工检讨书
2014/01/18 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
优秀求职信
2014/05/29 职场文书
韩语专业职业生涯规划范文:成功之路就在我们脚下
2014/09/11 职场文书
2014年图书馆个人工作总结
2014/12/18 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL