当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现可视化文件上传

JS实现可视化文件上传

2018年09月21日  | 移动技术网IT编程  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网