如何添加格式的图像？

Question

我有这种格式，我想以该格式添加图片

我的代码是：

<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>

Answer 1

这张带有HTML格式的简单上传图片，您可以引用它。

 $("#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>