gpt4 book ai didi

javascript - 为什么我的程序不显示它从用户那里收到的作为表单输入的 .png?

转载 作者:行者123 更新时间:2023-11-30 20:47:19 25 4
gpt4 key购买 nike

我有一个程序,它使用一个表单从用户那里接收一个 .png 文件,然后将其动态设置为一个 img。该表格似乎允许我选择一个文件,但不显示该文件。我假设我可以将 img 的 src 设置为与用户文件关联的变量 (wscimginput),但这似乎不起作用?还有其他方法可以解决这个问题吗?

这是处理表单和图像的代码。

var wscimgform = document.createElement("form");
var wscimginput = document.createElement("input");
wscimgform.appendChild(wscimginput);
_wsc.appendChild(wscimgform);
wscimginput.setAttribute("id", "wscimginput");
wscimginput.setAttribute("type", "file");
wscimginput.setAttribute("accept", "image/*");
var wscimg = document.createElement("img");
_wsc.appendChild(wscimg);
wscimg.setAttribute("src", "wscimginput");
wscimg.setAttribute("position", "absolute");
wscimg.setAttribute("height", "80%");
wscimg.setAttribute("top", "20%");

最佳答案

这是改编自没有 jQuery 的链接文章。

<html>
<head>
</head>
<body>
<div id="formDiv">
</div>
<script type="text/javascript">
var f = document.createElement("form");
var fi = document.createElement("input");
fi.setAttribute("id", "daFile");
fi.setAttribute("type", "file");
fi.setAttribute("accept", "image/*");
fi.addEventListener("change", showPreview);

f.appendChild(fi);

var i = document.createElement("img");
i.setAttribute("id", "daImg");
i.setAttribute("width", "200px");
i.setAttribute("height", "200px");

f.appendChild(i);

document.getElementById("formDiv").appendChild(f);

function showPreview(ev) {
if (ev.target.files && ev.target.files[0]) {
var r = new FileReader();
r.onload = function (e) {
document.getElementById("daImg").setAttribute("src", e.target.result);
}
r.readAsDataURL(ev.target.files[0]);
}
}
</script>
</body>
</html>

关于javascript - 为什么我的程序不显示它从用户那里收到的作为表单输入的 .png?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48569940/

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