JS实现可视化文件上传


Posted in Javascript onSeptember 08, 2018

本文实例为大家分享了JS可视化文件上传的具体代码,供大家参考,具体内容如下

测试-Style

<style type="text/css">
    .imgbox,.imgbox1
    {
      position: relative;
      width: 200px;
      height: 180px;
      border: 1px solid #ddd;
      overflow: hidden;
    }
 
    .imgnum{
      left: 0px;
      top: 0px;
      margin: 0px;
      padding: 0px;
    }
    .imgnum input,.imgnum1 input {
      position: absolute;
      width: 200px;
      height: 180px;
      opacity: 0;
    }
    .imgnum img,.imgnum1 img {
      width: 100%;
      height: 100%;
    }
    .close,
    .close1 {
      color: red;
      position: absolute;
      right: 10px;
      top: 0;
      display: none;
    }
</style>

测试--HTML

<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>

JS: 需要引入jquery

<script type="text/javascript">
  $(function() {
    $(".filepath").on("change",function() {
      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();
      })
    })
  })
 
 
 
//关键代码:getObjectURL return url
  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
  };
 

//modify img
  $(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>

注:低版本IE不支持可视化

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
javascript 二分法(数组array)
Apr 24 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 #Javascript
vue-router的HTML5 History 模式设置
Sep 08 #Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 #Javascript
react 父子组件之间通讯props
Sep 08 #Javascript
js代码规范之Eslint安装与配置详解
Sep 08 #Javascript
vue弹窗插件实战代码
Sep 08 #Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
java script编程起步(第三课)
2007/01/10 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
玩转方法:call和apply
2014/05/08 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
详解React中setState回调函数
2018/06/14 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
layui 动态设置checbox 选中状态的例子
2019/09/02 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
2020/08/20 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
在Python中使用模块的教程
2015/04/27 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
司机辞职报告范文
2014/01/20 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技