最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览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: 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?

Share Improve this question asked May 8, 2017 at 7:02 Rashed HasanRashed Hasan 3,75111 gold badges42 silver badges89 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

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>

与本文相关的文章

发布评论

评论列表(0)

  1. 暂无评论