javascript - 获取图片路径并显示在TextArea中

Question

在我的 MVC Web 应用程序中，我想从中获取图像路径并将其显示在文本区域中。这是我的代码片段，但它不起作用!

     <label>Load Picture</label>&ensp;
            <input id="uploadImage" type="file" name="myPhoto" accept="image/gif, image/jpeg, image/png" class="form-control" onchange="PreviewImage();" />
            <script type="text/javascript">
                function PreviewImage() {
                    var oFReader = new FileReader();
                    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

                    oFReader.onload = function (oFREvent) {
                        document.getElementById("uploadPreview").src = oFREvent.target.result;
                    };
                };
            </script>
            <img id="uploadPreview" style="width: 350px; height: 400px;" class="form-control" /><br />

            <label>Save</label>
            <input type="button" class="btn btn-primary" value="Save" onclick="LoadCuepoint();" />
            <script type="text/javascript">
                function LoadCuepoint() {
                  textArea1.value = path.getElementById("uploadImage");
                };
            </script>

Answer 1

您的代码不完整，但我假设您已经分别有一个文件输入和一个文本区域。如果是这样，以下应该有效:

<input type="file" onchange="handleFilePath(this);" />
<textarea id="filePathTextArea"></textarea>

文件更改后，您应该能够使用 FileReader 读取其路径:

function handleFilePath(input) {
    // Initialize file variable
    var file;

    // Check if a file is actually selected
    if (input.files && (file = input.files[0])) {
        // Create a FileReader
        var fileReader = new FileReader();

        // Listen to its onload event
        fileReader.onload = function(e) {
            // Set the result to textarea
            document.getElementById("filePathTextArea").value = e.target.result;
        };

        // Then read the file
        fileReader.readAsDataURL(file);
    }
}