gpt4 book ai didi

javascript - 如何在提交表单之前加载图像

转载 作者:行者123 更新时间:2023-11-28 18:24:40 26 4
gpt4 key购买 nike

基本上我有一个表单,其中有一个带有文件输入的图像框,现在我需要显示从文件输入中选择的图片并将其显示在我的图像框中,而无需提交表单。

我发现一个教程说:

<!DOCTYPE html>
<html>
<head>
<script>
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}

function readURL(input) {
if (input.files && input.files[0]) {
reader.readAsDataURL(input.files[0]);
}
}

$("#imgInp").change(function(){
readURL(this);
alert(input.val());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>

</body>
</html>

但这不会在我的图像框中显示所选图像。

最佳答案

尝试这个示例 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]);
}
}

$("#imgInp").change(function(){
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>

关于javascript - 如何在提交表单之前加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39344271/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com