custom input type file, and replace the input type with selected image using jquery

Question

.image-upload > input
{
    display: none;
}
.upload-icon{
	width: 100px;
	height: 97px;
	border: 2px solid #5642BE;
	border-style: dotted;
	border-radius: 18px;
}
.upload-icon img{
	width: 60px;
	height: 60px;
	margin:19px;
	cursor: pointer;
}

<form>
      <div class="image-upload">
         <label for="file-input">
           <div class="upload-icon">
            <img src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
       <input id="file-input" type="file"/>
      </div>
 </form>

I want to upload only image with input type file, when an image will be selected for upload then, upload image icon will replace within the selected image(like bellow screenshot). I did not write any script. what should be the script?

Answer 1

I think you want to show preview of your selected image.

        $("#file-input").change(function () {
            readURL(this, 'sampleImageId');
            $('.upload-icon').css('border-style','none');
        });
        
        function readURL(input, id) {
          if (input.files && input.files[0]) {
            var reader = new FileReader();

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

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

        }
      }

.image-upload > input
    {
        display: none;
    }
    .upload-icon{
    	width: 100px;
    	height: 97px;
    	border: 2px solid #5642BE;
    	border-style: dotted;
    	border-radius: 18px;
    }
    .upload-icon img{
    	width: 90px;
    	height: 87px;
    	margin:5px;
    	cursor: pointer;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
          <div class="image-upload">
             <label for="file-input">
               <div class="upload-icon">
                <img id="sampleImageId" src="https://image.flaticon.com/icons/png/128/61/61112.png">
                </div>
              </label>
           <input id="file-input" type="file"/>
          </div>
     </form>

Answer 2

There is a simplest way for this using one line of code. You can create this using URL.createObjectURL(), check working snippet for this

$('#file-input').change( function(event) {
    $("img.icon").attr('src',URL.createObjectURL(event.target.files[0]));
    $("img.icon").parents('.upload-icon').addClass('has-img');
});

.image-upload > input
{
    display: none;
}
.upload-icon{
  width: 100px;
  height: 97px;
  border: 2px solid #5642BE;
  border-style: dotted;
  border-radius: 18px;
}
.upload-icon img{
  width: 60px;
  height: 60px;
  margin:19px;
  cursor: pointer;
}
.upload-icon.has-img {
    width: 100px;
    height: 97px;
    border: none;
}
.upload-icon.has-img img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    margin:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
	  <div class="image-upload">
		 <label for="file-input">
		   <div class="upload-icon">
			<img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
			</div>
		  </label>
	   <input id="file-input" type="file"/>
	  </div>
 </form>

Answer 3

You can try use jQuery for this. I made an example below.

The code to make the preview is this:

function readURL(input) {
  var id = $(input).attr("id");

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

    reader.onload = function(e) {
      $('label[for="' + id + '"] .upload-icon').css("border", "none");
      $('label[for="' + id + '"] .icon').hide();
      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
    }

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

$("input[id^='file-input']").change(function() {
  readURL(this);
});

I've made it more dynamic so you can use the input field multiple times, as in your example image.

Hope it helps you.

function readURL(input) {
  var id = $(input).attr("id");

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

    reader.onload = function(e) {
      $('label[for="' + id + '"] .upload-icon').css("border", "none");
      $('label[for="' + id + '"] .icon').hide();
      $('label[for="' + id + '"] .prev').attr('src', e.target.result).show();
    }

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

$("input[id^='file-input']").change(function() {
  readURL(this);
});

.image-upload>input {
  display: none;
}

.upload-icon {
  width: 100px;
  height: 97px;
  border: 2px solid #5642BE;
  border-style: dotted;
  border-radius: 18px;
  float: left;
}

.upload-icon .icon {
  width: 60px;
  height: 60px;
  margin: 19px;
  cursor: pointer;
}

.prev {
  display: none;
  width: 95px;
  height: 92px;
  margin: 2px;
  border-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <div class="image-upload">
    <label for="file-input">
           <div class="upload-icon">
            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
    <input id="file-input" type="file" />
  </div>
  <div class="image-upload">
    <label for="file-input2">
           <div class="upload-icon">
            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
    <input id="file-input2" type="file" />
  </div>
  <div class="image-upload">
    <label for="file-input3">
           <div class="upload-icon">
            <img class="icon" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon.com/icons/png/128/61/61112.png">
            </div>
          </label>
    <input id="file-input3" type="file" />
  </div>
</form>