首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现input file上传图片预览效果

- Author -

李斌

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javaScript parseInt字符转化为数字函数使用小结
Nov 05 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
JS判断元素为数字的奇异写法分享
Aug 01 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
Sep 06 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
微信小程序实现多选功能
Nov 04 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
vue移动端写的拖拽功能示例代码
Sep 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
https(7) shell(3) 反向代理(2) reload(1) 负载均衡(6) 生成缩略图(1) 防盗链(1) 默认端口(3) http(6) 动静分离(1)
You might like
php的ajax简单实例
2014/02/27 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP的压缩函数实现：gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
JavaScript中的lastIndexOf()方法使用详解
2015/06/06 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
python uuid模块使用实例
2015/04/08 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
python中pickle模块浅析
2020/12/29 Python
中科前程Java笔试题
2016/11/20 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
企业内控岗位的职责
2014/02/07 职场文书
求职简历自我评价范例
2014/03/12 职场文书
设备管理实施方案
2014/05/31 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
雷峰塔导游词
2015/02/09 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫