codepen.io Profile Image Upload JQuery not working-CodePudding

I'm unable to upload Images with multiple ids

I would like to upload an image as per the id, for id="firstImage" different and for id="secondImage" different.

How we can resolve this issue, I think we need to modify Jquery script.

Please have look at this URL: https://codepen.io/shantikumarsingh/pen/RRmWxo

$(document).ready(function() {

    
    var readURL = function(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.profile-pic').attr('src', e.target.result);
            }
    
            reader.readAsDataURL(input.files[0]);
        }
    }
    

    $(".file-upload").on('change', function(){
        readURL(this);
    });
    
    $(".upload-button").on('click', function() {
       $(".file-upload").click();
    });
});

body {
  background-color: #efefef;
}

.profile-pic {
    width: 200px;
    max-height: 200px;
    display: inline-block;
}

.file-upload {
    display: none;
}
.circle {
    border-radius: 100% !important;
    overflow: hidden;
    width: 128px;
    height: 128px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 72px;
}
img {
    max-width: 100%;
    height: auto;
}
.p-image {
  position: absolute;
  top: 167px;
  right: 30px;
  color: #666666;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.p-image:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
.upload-button {
  font-size: 1.2em;
}

.upload-button:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  color: #999;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div >
   <div  id="firstImage">
     <div >
       <img  src="https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg">

     </div>
     <div >
       <i ></i>
        <input  type="file" accept="image/*"/>
     </div>
  </div>

<div  id="secondImage">
     <div >
       <img  src="https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg">

     </div>
     <div >
       <i ></i>
        <input  type="file" accept="image/*"/>
     </div>
  </div>
</div>

CodePudding user response：

You can do it like this:

$(document).ready(function() {


  var readURL = function(input) {
    var $this = $(input)
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {
        $this.closest('.columns').find('.profile-pic').attr('src', e.target.result);
      }

      reader.readAsDataURL(input.files[0]);
    }
  }


  $(".file-upload").on('change', function() {
    readURL(this);
  });

  $(".upload-button").on('click', function() {
    $(this).next(".file-upload").click();
  });
});

Demo

$(document).ready(function() {


  var readURL = function(input) {
    var $this = $(input)
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function(e) {
        $this.closest('.columns').find('.profile-pic').attr('src', e.target.result);
      }

      reader.readAsDataURL(input.files[0]);
    }
  }


  $(".file-upload").on('change', function() {
    readURL(this);
  });

  $(".upload-button").on('click', function() {
    $(this).next(".file-upload").click();
  });
});

body {
  background-color: #efefef;
}

.profile-pic {
  width: 200px;
  max-height: 200px;
  display: inline-block;
}

.file-upload {
  display: none;
}

.circle {
  border-radius: 100% !important;
  overflow: hidden;
  width: 128px;
  height: 128px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 72px;
}

img {
  max-width: 100%;
  height: auto;
}

.p-image {
  position: absolute;
  top: 167px;
  right: 30px;
  color: #666666;
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.p-image:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.upload-button {
  font-size: 1.2em;
}

.upload-button:hover {
  transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
  color: #999;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div  id="firstImage">
    <div >
      <img  src="https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg">

    </div>
    <div >
      <i ></i>
      <input  type="file" accept="image/*" />
    </div>
  </div>

  <div  id="secondImage">
    <div >
      <img  src="https://t3.ftcdn.net/jpg/03/46/83/96/360_F_346839683_6nAPzbhpSkIpb8pmAwufkC7c5eD7wYws.jpg">

    </div>
    <div >
      <i ></i>
      <input  type="file" accept="image/*" />
    </div>
  </div>
</div>