我有以下代码：function displayImg() { let fileUpload = document.getElementById("fileUpload").value; let container document.getElementById("container"); container.innerHTML = `<img src="fileUpload">` }<input type = file id = "fileUpload" accept = "image/*"><button onclick = "displayImg()">Click to show</button><div id="container"></div>我希望用户可以将文件输入到文件输入字段中，并在单击按钮时将其放入动态创建的图像的源中。我该怎么做呢？
2 回答
饮歌长啸
TA贡献1951条经验 获得超3个赞
你可以试试这个
<html>
<body>
<input type = file id = "fileUpload" accept = "image/*">
<button onclick = "displayImg()">Click to show</button>
<div id="container">
<img id="img"></div>
<script>
function displayImg() {
let fileUpload = document.getElementById("fileUpload").value;
//alert(fileUpload);
let image = document.getElementById("img");
img.src = fileUpload;
}
</script>
</body>
</html>
注意：该value属性仅返回文件名，因此图像应与代码位于同一文件夹中。或者，如果您愿意，可以在之前添加文件的路径。
侃侃尔雅
TA贡献1801条经验 获得超15个赞
请使用以下代码：
var uploadedFileURL;
function handleFile() {
var fileUploadControl = document.getElementById('fileUpload');
var file = fileUploadControl.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function() {
uploadedFileURL = reader.result;
};
reader.readAsDataURL(file);
}
}
function displayImg() {
var fileUpload = document.getElementById("fileUpload").value;
var container = document.getElementById("container");
container.innerHTML = `<img src="${uploadedFileURL}">`;
}
<input id="fileUpload" type="file" onchange="handleFile()" accept="image/*" />
<button onclick="displayImg()">Click to show</button>
<div id="container"></div>
- 2 回答
- 0 关注
- 101 浏览
添加回答
举报
0/150
提交
取消