gpt4 book ai didi

javascript - 如何制作一个输入文件到dataurl以供使用?

转载 作者:行者123 更新时间:2023-11-28 01:14:30 26 4
gpt4 key购买 nike

我想从输入标签中抓取一个文件并将其转换为一个 URL,然后在段落标签中显示该 URL。

仅使用 Javacript/HTML 这可能吗?

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.12.0.min.js"></script>
</head>

<body>

<form action="demo_form.asp">
<input type="file" id="wow" name="pic" accept="image/*">
</form>

<script>
$("document").ready(function(){

$("#wow").change(function() {
document.getElementById("penut").innerHTML = document.getElementById("wow").files.toDataUrl();
});
});
</script>

<p id="penut"></p>

</body>
</html>

最佳答案

六天后,我发现了一些代码可以做到这一点。

    <p>Select a File to Load:</p>
<input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" />


<p>File Contents as DataURL:</p>
<textarea id="textAreaFileContents" style="width:640;height:240" ></textarea>

<script type="text/javascript">

function loadImageFileAsURL()
{
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0)
{
var fileToLoad = filesSelected[0];

var fileReader = new FileReader();

fileReader.onload = function(fileLoadedEvent)
{
var textAreaFileContents = document.getElementById
(
"textAreaFileContents"
);

textAreaFileContents.innerHTML = fileLoadedEvent.target.result;
};

fileReader.readAsDataURL(fileToLoad);
}
}

</script>

</body>
</html>

关于javascript - 如何制作一个输入文件到dataurl以供使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36264268/

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