javascript - custom input type file, and replace the input type with selected image using jquery - Stack Overflow

admin管理员组

文章数量:1320173

.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=".png">
            </div>
          </label>
       <input id="file-input" type="file"/>
      </div>
 </form>

.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./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?

• javascript
• jquery
• html
• css
• angularjs

Share Improve this question Follow asked May 8, 2017 at 7:02 Rashed HasanRashed Hasan 3,7511111 gold badges4242 silver badges8989 bronze badges 3

• You should specify your backend language/technology (php? c#? ...) – Verthosa Commented May 8, 2017 at 7:04
• "what should be the script" ... that really isn't how this site works. It's not a free code writing service or a "how to" tutorial service. There are lots of resources on the web on how to acplish this though. When you have real code and it's not working as expected you will get plenty of help here – charlietfl Commented May 8, 2017 at 7:07
• @Verthosa my backend language/technology is php – Rashed Hasan Commented May 8, 2017 at 7:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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./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./icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon./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./icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon./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./icons/png/128/61/61112.png">
            <img class="prev" src="https://image.flaticon./icons/png/128/61/61112.png">
            </div>
          </label>
    <input id="file-input3" type="file" />
  </div>
</form>

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./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./icons/png/128/61/61112.png">
			</div>
		  </label>
	   <input id="file-input" type="file"/>
	  </div>
 </form>

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./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./icons/png/128/61/61112.png">
                </div>
              </label>
           <input id="file-input" type="file"/>
          </div>
     </form>

本文标签：