Question

我想从输入标记中获取文件并将其转换为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>

Answer 1

六天后，我发现了一些代码。

    <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>

如何使用输入文件todataurl？

1 个答案: