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 相关文章推荐
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
利用js实现遮罩以及弹出可移动登录窗口
Jul 08 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
浅析vue中的MVVM实现原理
Mar 04 Javascript
javascript实现简单搜索功能
Mar 26 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 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
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
JavaScript的级联函数用法简单示例【链式调用】
2019/03/26 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
nodejs使用socket5进行代理请求的实现
2020/02/21 NodeJs
JS删除数组指定值常用方法详解
2020/06/04 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
基于Python函数的作用域规则和闭包(详解)
2017/11/29 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python实现简单成绩录入系统
2019/09/19 Python
Python学习之os模块及用法
2020/06/03 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python 实现有道翻译功能
2021/02/26 Python
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
农业资源与环境专业自荐信范文
2013/12/30 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
上课说话检讨书大全
2014/01/22 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers