How can I add an image in a format?

Question

I have this format and I want to add the image in that format

My code is:

<div class="col-md-4">
    <li>
        <span class="product-thumb-info">
            <button class="btn" style="width:100%; color: white; background:#0088cc" onclick="document.getElementById('getFile').click()">Add Image</button>
            <input type='file' id="getFile" style="display:none">
            <img alt="" class="img-responsive" src="img/products/product-10.jpg">
        </span>
    </li>    
</div>

The problem is that I do not know how to add the image in the attached format when I choose the image. — Laura Cirstea, Nov 20 '18 at 13:53
So when the user selects a file from their local machine, you want to display it in place of the existing ``? — BenM, Nov 20 '18 at 13:54
Look at this and make sure the link is correct. https://www.w3schools.com/html/html_filepaths.asp — Katie.Sun, Nov 20 '18 at 14:03

score 1 · Accepted Answer · answered Nov 20 '18 at 14:05

This simple upload image with format your html, you can refer it.

 $("#getFile").change(function () {
            if (this.files && this.files[0]) {
                var reader = new FileReader();

                reader.onload = imageIsLoaded;
                reader.readAsDataURL(this.files[0]);
            }
        });
        
   function imageIsLoaded(e) {
        $('.img-responsive').attr('src', e.target.result);

    };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-md-4">
    <li>
        <span class="product-thumb-info">
            <button class="btn" style="width:100%; color: white; background:#0088cc" onclick="document.getElementById('getFile').click()">Add Image</button>
            <input type='file' id="getFile" style="display:none">
            <img alt="" class="img-responsive" src="">
        </span>
    </li>    
</div>

Thank you for your help!! – Laura Cirstea Nov 20 '18 at 14:11 — Laura Cirstea, Nov 20 '18 at 14:11

How can I add an image in a format?

1 Answers1