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 AJAX回调函数this指向问题
Feb 08 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
微信小程序 toast 详解及实例代码
Nov 09 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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
很实用的一个完整email发送程序
2006/10/09 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
ThinkPHP使用心得分享-分页类Page的用法
2014/05/15 PHP
PHP通过内置函数memory_get_usage()获取内存使用情况
2014/11/20 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
node和vue实现商城用户地址模块
2018/12/05 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
node.js通过url读取文件
2020/10/16 Javascript
python中MethodType方法介绍与使用示例
2017/08/03 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
python实现复制大量文件功能
2019/08/31 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
银行批评与自我批评
2014/02/10 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers