如何解决使用输入类型图像上传之前预览图像
如果我使用的是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"
的图片?
解决方法
您需要在点击功能中使用e.PreventDefault方法,以确保您每次$.ajax({
url: 'urlhere.php',type: 'GET',data: {text: text},success: function(data) {
var getNumber = countNumber();
getNumber.done(function(data) {
number = data;
let newContent = "The number is "+ number; //console.log's "undefined"
});
}
});
click
都不是type=image
页面时!!
实时演示:
reloading
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(e) {
e.preventDefault()
readURL(this);
});
$("input[type='image']").click(function(e) {
e.preventDefault()
$("input[id='imgInp']").click();
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。