JS实现可视化文件上传

本文实例为大家分享了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不支持可视化

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• 原生JS实现前端本地文件上传
• js实现文件上传功能 后台使用MultipartFile
• JS+Struts2多文件上传实例详解
• vue.js 图片上传并预览及图片更换功能的实现代码
• php+croppic.js实现剪切上传图片功能
• JavaScript使用享元模式实现文件上传优化操作示例
• JS实现图片上传多次上传同一张不生效的处理方法
• js实现图片上传并预览功能
• vue.js图片转Base64上传图片并预览的实现方法
• Angularjs实现多图片上传预览功能
• JavaScript实现异步图像上传功能
• SpringBoot+Vue.js实现前后端分离的文件上传功能
• node.js自动上传ftp的脚本分享
• JS实现的文件拖拽上传功能示例
• Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
• JS和Canvas实现图片的预览压缩和上传功能
• JavaScript代码实现txt文件的上传预览功能
• js 实现 input type="file" 文件上传示例代码
• js实现上传图片预览的方法
• Servlet+Jsp实现图片或文件的上传功能具体思路及代码
• 上传图片预览JS脚本 Input file图片预览的实现示例
• JS实现上传图片的三种方法并实现预览图片功能
• js实现图片上传并正常显示
• 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
• JS中使用FormData上传文件、图片的方法
• 客户端js判断文件类型和文件大小即限制上传大小
• js获取上传文件的绝对路径实现方法
• 原生JS和jQuery版实现文件上传功能
• 微信JSSDK上传图片
• 简单实现js上传文件功能
• JS文件上传神器bootstrap fileinput详解
• js实现上传图片之上传前预览图片
• Javascript图片上传前的本地预览实例
• 学习使用AngularJS文件上传控件
• JS简单实现文件上传实例代码（无需插件）
• 分享5个好用的javascript文件上传插件