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 ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
sails框架的学习指南
Dec 22 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
Jquery 效果使用详解
Nov 23 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
node实现基于token的身份验证
Apr 09 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
vue mvvm数据响应实现
Nov 11 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
phpfans留言版用到的install.php
2007/01/04 PHP
php 中英文语言转换类代码
2011/08/11 PHP
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
jquery 定位input元素的几种方法小结
2013/07/28 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
详解python中的json的基本使用方法
2016/12/21 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python实现线性判别分析(LDA)的MATLAB方式
2019/12/09 Python
Django 路由层URLconf的实现
2019/12/30 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
什么是.net
2015/08/03 面试题
先进德育工作者事迹材料
2014/01/24 职场文书
单身联谊活动方案
2014/01/29 职场文书
一份创业计划书范文
2014/02/08 职场文书
《灯光》教学反思
2014/02/08 职场文书
会计稽核岗位职责
2015/04/13 职场文书
储备店长岗位职责
2015/04/14 职场文书
公司费用报销管理制度
2015/08/04 职场文书
Python数据清洗工具之Numpy的基本操作
2021/04/22 Python