on click image change for multiple using java script without showing choose file for input field

Question

If i won't use div for input field the image will get changed as shown in first image. But, i don't want to display that input field as choose file, so i wrote css for that input field. Can any one help me out from this?

HTML CODE

<div class="row">
<div class="col-md-3">
    <div id="changepic">
        <i class="fa fa-camera"><input type='file' class="imgInp fileInput" />  Change Photo</i>
   </div>
   <img class="blah" src="garments.jpg" width="150px" height="150px" alt="your image" />
</div>
<div class="col-md-3">
    <div id="changepic">
        <i class="fa fa-camera"><input type='file' class="imgInp fileInput" />  Change Photo</i>
   </div>
   <img class="blah" src="garments.jpg" width="150px" height="150px" alt="your image" />
</div> 
<div class="col-md-3">
    <div id="changepic">
        <i class="fa fa-camera"><input type='file' class="imgInp fileInput" />  Change Photo</i>
   </div>
   <img class="blah" src="garments.jpg" width="150px" height="150px" alt="your image" />
</div> 
<div class="col-md-3">
    <div id="changepic">
        <i class="fa fa-camera"><input type='file' class="imgInp fileInput" />  Change Photo</i>
   </div>
   <img class="blah" src="garments.jpg" width="150px" height="150px" alt="your image" />
</div>                              
</div>

MY CSS

#changepic{
    background: rgb(158, 158, 158);
    padding: 5px;
    width: 140px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
    font-size: 50px;
    opacity: 0;
    -moz-opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}

MY SCRIPT

<script>
    function readURL() {
        var $input = $(this);
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $input.next('.blah').attr('src', e.target.result).show();
            }
            reader.readAsDataURL(this.files[0]);
        }
    }

    $(".imgInp").change(readURL);

</script>

vijay · Accepted Answer · 2017-05-20 10:43:55Z

1

Try like this

<input type="file" id="file1" style="display:none" onchange="readURL()" />

<img src="something.jpg" onclick="$('#file1').click()"/> <!-- jquery -->

 <img src="something.jpg" onclick="document.getElementById("file1").click()"/>  <!-- javascript-->

answered May 20, 2017 at 10:43

vijay

4926 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

on click image change for multiple using java script without showing choose file for input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related