使用输入类型图像上传前预览图像

Question

如果我使用img标签并在单击简单按钮后 - 图像预览工作：

HTML

<form runat="server">

  <input type='file' id="imgInp" />

  <img id="blah" src="#" alt="your image" /> <--- in this place img

</form>

JS

function readURL(input) {

  if (input.files && input.files[0]) {

    var reader = new FileReader();

    

    reader.onload = function(e) {

      $('#blah').attr('src', e.target.result);

    }

    

    reader.readAsDataURL(input.files[0]); // convert to base64 string

  }

}

$("#imgInp").change(function() {

  readURL(this);

});

但是当我试图隐藏按钮并使图像可点击（使用实现它input type="image"）预览不起作用时，选择图像没有效果，不更改默认图像）。

默认的可点击图片类似于“点击此处上传照片”。

HTML

<form runat="server">               

    <div class="thumb-preview">

        <input type="image" id="blah" src="<?=path?>/images/upload.png"/> <-- input type image

        <input type='file' id="imgInp" style="display: none;" />

    </div>                            

</form>

JS

function readURL(input) {

  if (input.files && input.files[0]) {

    var reader = new FileReader();

    

    reader.onload = function(e) {

      $('#blah').attr('src', e.target.result);

    }

    

    reader.readAsDataURL(input.files[0]); // convert to base64 string

  }

}

$("#imgInp").change(function() {

  readURL(this);

});

$("input[type='image']").click(function() {

    $("input[id='imgInp']").click();

});

你有想法如何改变形象input type="image"吗？

Answer 1

您需要在点击功能中使用e.PreventDefault方法，以确保您每次点击时click&nbsp;type=image都不是该页面。！reloading现场演示：function readURL(input) {&nbsp; if (input.files && input.files[0]) {&nbsp; &nbsp; var reader = new FileReader();&nbsp; &nbsp; reader.onload = function(e) {&nbsp; &nbsp; &nbsp; $('#blah').attr('src', e.target.result);&nbsp; &nbsp; }&nbsp; &nbsp; reader.readAsDataURL(input.files[0]); // convert to base64 string&nbsp; }}$("#imgInp").change(function(e) {&nbsp; e.preventDefault()&nbsp; readURL(this);});$("input[type='image']").click(function(e) {&nbsp; e.preventDefault()&nbsp; $("input[id='imgInp']").click();});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form runat="server">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; <div class="thumb-preview">&nbsp; &nbsp; &nbsp; &nbsp; <input type="image" id="blah" src="https://img.icons8.com/dotty/80/000000/upload.png"/>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <input type='file' id="imgInp" style="display: none;" />&nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</form>