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 关键字屏蔽实现函数
Aug 02 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
DIV始终居中的js代码
Feb 17 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
详解handlebars+require基本使用方法
Dec 21 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
js+canvas实现画板功能
Sep 13 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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
php语言流程控制中的主动与被动
2012/11/05 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
神奇的代码 通杀各种网站-可随意修改复制页面内容
2008/07/17 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
javascript使用prototype完成单继承
2014/12/24 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
python实现跨文件全局变量的方法
2014/07/07 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python3爬虫怎样构建请求header
2018/12/23 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python脚本后台执行方式
2019/12/21 Python
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
老总助理工作岗位职责
2014/02/06 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
《雪儿》教学反思
2014/04/17 职场文书
食品安全承诺书
2014/05/22 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
超市食品安全承诺书
2015/04/29 职场文书
素质教育学习心得体会
2016/01/19 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA