文件类型值作为图像源

file type value as image source

本文关键字：图像 类型 文件      更新时间：2023-09-26

我的页面上有一个div，它有一个图像标记和作为文件的输入类型。我想做的是，当我选择图像时，除了选择按钮外，我还会在文本框中获得url。我想把它作为图像源的路径。

<!DOCTYPE html>
<html>
<head>
<script>
function load()
{
    var  path = document.getElementById('image').value;
    var newpath="file:///" + path;
    document.getElementById('image').src = newpath;
}
</script>
</head>
<body>
<div style="height:300px; width:300px; border:1px solid red;">
<img id="1" src="load()" height="300" width="300">
</div>
<form action="demo_form.asp">
  Select a file: <input type="file" id="image" onclick="load()" >
                 <input type=submit onclick="load()">
</form>
</body>
</html>

您不能用代码修改文件输入的值，因为这意味着任何人都可以强迫您发送计算机上的任何文件，而不是您选择的文件。

要实现这一点，唯一的方法是在文件输入中隐藏文本框，并创建一个可以控制的新文本框。

<input id="txtNewPath" type="text" />

然后

function load() {
    var path = document.getElementById('image').value;
    var newpath="file:///" + path;
    document.getElementById('txtNewPath').value = newpath;
}

我认为你的问题在这一行：

document.getElementById('image').src = newpath;

将其更改为指向img标记：

document.getElementById('1').src = newpath;
相关文章：