Upload image using upload button

Question

I have an upload button that allows a user to upload only an image and it will be displayed in a div. After uploading the image if the user clicks on the image I want to display the image in a popup. Please help me how to achieve this.

Please visit the help center, take the tour to see what and How to Ask. Do some research, search for related topics on SO; if you get stuck, post a minimal reproducible example of your attempt, noting input and expected output. — mplungjan
– mplungjan, Commented Jun 22, 2018 at 11:50
Also let us know if the problems you have a re server or clientside. If server side, add the server process you use - like PHP or similar — mplungjan
– mplungjan, Commented Jun 22, 2018 at 11:51

Bhargav Chudasama · Accepted Answer · 2018-06-22 12:03:17Z

1

try this code

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

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

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

$("#imgInp").change(function() {
  readURL(this);
});

var modal = document.getElementById('myModal');
$("#blah").click(function() {
  modal.style.display = "block";
  $('.img').html(this);
});

var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" height="100" width="100" />
</form>

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="img"></div>
  </div>

</div>

answered Jun 22, 2018 at 12:03

Bhargav Chudasama

7,2256 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PDSSandeep Over a year ago

Thanks, Dr. Strange It is working, Can you please make #blah visible to the users after the image upload

Bhargav Chudasama Over a year ago

you try for this @PDSSandeep

PDSSandeep Over a year ago

if ($("#imgInp").val() != null){ $('#blah').css("display","block"); }

Collectives™ on Stack Overflow

Upload image using upload button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related