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

如果我正在使用

img

标记，并在单击简单按钮-图像预览工作后：

HTML

<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" /> <--- in this place img
</form>

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

但当我试图隐藏按钮并使图像可点击时（使用

input type=“image”

），选择“图像无效果，不更改默认图像”后预览不工作）

默认的可单击图像类似于“单击此处上载照片”

HTML

<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" /> <--- in this place img
</form>

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

您知道如何更改

input type=“image”

的图像吗？

您需要在单击功能中使用方法，以确保您的

单击
type=image
不会在每次单击页面时都重新加载它

现场演示：


函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'#blah'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；//转换为base64字符串
}
}
$（“#imgInp”）。更改（功能（e）{
e、 预防默认值（）
readURL（this）；
});
$（“输入[type='image']”）。单击（函数（e）{
e、 预防默认值（）
$（“输入[id='imgInp']）。单击（）；
});

您遇到了什么问题？任何console.log错误。你能具体说明你目前遇到的问题吗？@AlwaysHelping“但当我试图隐藏按钮并使图像可点击时（使用input type=“image”）预览不工作，在选择“图像无效果，不更改默认图像”后”。通过F12>控制台，没有任何错误。
@alwayshelving的简单src路径是的，完全正确！谢谢，我错过的是
e.preventDefault（）
。。。把它贴出来作为答案，我会接受的。非常感谢。贴出了答案。我还要补充一些解释。