I want to display image instead of input type = "file"

Question

I wrote the following code but didn't get value of file field now

<div class="image-upload" style="position: absolute; margin-top: -39px; margin-left: 376px;">
    <label for="file-input">
       <img width="50%" height="50%" src="images/camera-icon.png">
    </label>
   <input type="file" id="prod_pic" name="imgfile" style="display:none;">
</div>

Actually In Jquery I am not getting value of file field $(document).on('change', '#prod_pic', function() { alert($('#prod_pic').val()); }); — Pranali Pol, Oct 31 '14 at 10:55
try http://stackoverflow.com/questions/14401550/adding-style-to-file-upload-button-in-css — Rakesh Sharma, Oct 31 '14 at 10:55
@PranaliPol checkout this example [demo](http://jsfiddle.net/chanchal_chandanbatwe/cz5cmcza/) — chanchal, Oct 31 '14 at 11:16

score 1 · Accepted Answer · answered Oct 31 '14 at 10:58

I Have created a custom file input, here is the code:

<span class="customInputFile">
    <div id="fileUpdate">
        <div id="fileUpdate-left">
            Anexe o seu currículo
        </div>
        <div id="fileName"></div>
    </div>
    <input type="file">
</span>


$('#fileUpdate').on("click", function() {
    $(this).next('input[type="file"]').click();
    $(this).next('input[type="file"]').change( function(){
        fileName = $(this).val().replace(/C:\\fakepath\\/i, '')
        $('#fileName').text(fileName).animate({
            marginTop: '13px'
        });
    });
});


.customInputFile{
    display: block;
    margin: 0 0 10px 0;
    cursor: pointer;
}
.customInputFile input[type="file"] {
    display: none;
}
.customInputFile #fileUpdate {
    background: rgb(114,191,68);
    display: block;
    padding: 25px 0; 
    color: rgb(255,255,255);
    text-align: center;
    overflow: auto;
}
.customInputFile #fileUpdate #fileUpdate-left{
    display: inline-block;
    width: 190px;
    font-size: 20px;
    line-height: 23px;
    font-family: 'museo_sans500';
    text-transform: uppercase;
    text-align: left;
}

here is a fiddle: http://jsfiddle.net/srp3827v/

take my code as an example and stylize in your way ...

I want to display image instead of input type = "file"

1 Answers1