Question

是否可以使用JavaScript将图片网址转换为准备提交的<input type="file">？或者达到类似的效果？实际上，我在http://example.com/xxx/image.jpg处有图像，并且我想将其“预加载”到使用注册表单中，因此可以使用表单提交表单，就像使用输入字段从磁盘加载一样。

案例场景是从我想用来填充用户注册表单的API获取的用户数据，其中一个字段是API作为URL移交的用户头像。

这不是关于如何使用输入字段预览从磁盘中选择的图像！

Answer 1

出于安全原因，输入类型=“文件”的值是以编程方式只读的，所以不，这是不可能的。

参考链接： {{3}}

Answer 2

正如Jahl所说，出于安全原因，它无法完成，但作为替代方案，您可以拥有隐藏的输入值并填充它。显示图像并可选择提交不同的图像 - 如果没有提交其他图像，请默认使用加载的头像。

Answer 3

使用FileReader API的示例。这会加载图像html对象中的File对象中加载的图像。

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <div>
            <input id="btnFile" type="file" accept="image/*" />
        </div>

        <div>
            <img id="img" style="max-width: 100px" />
        </div>


        <script>



            var btnFile = document.getElementById("btnFile");

            //Register event on file selected or changed.
            addEvents(btnFile, "change", function (event) {
                if (event.target.files.length !== 0) {
                    var file = event.target.files[0];
                    //Check if the file is IMAGE.
                    if (file.type.match("image.*")) {

                        var fl = new FileReader();

                        //Add event to read the content file.
                        addEvents(fl, "load", function (evt) {
                            //alert(evt.target.result);
                            try {


                                //CONVERT ARRAY BUFFER TO BASE64 STRING.
                                var dataURL = evt.target.result;

                                document.getElementById("img").src = dataURL;


                            } catch (e) {
                                alert(e);
                            }

                        });

                        //Read the file as arraybuffer.

                        fl.readAsDataURL(file);

                    } else {

                        alert("Please select a IMAGE FILE");
                    }
                }

            });

            function addEvents(obj, evtName, func) {
                if (obj.addEventListener !== undefined && obj.addEventListener !== null) {
                    obj.addEventListener(evtName, func, false);
                } else if (obj.attachEvent !== undefined && obj.attachEvent !== null) {
                    obj.attachEvent(evtName, func);
                } else {
                    if (this.getAttribute("on" + evtName) !== undefined) {
                        obj["on" + evtName] = func;
                    } else {
                        obj[evtName] = func;
                    }
                }

            }

            function removeEvents(obj, evtName, func) {
                if (obj.removeEventListener !== undefined && obj.removeEventListener !== null) {
                    obj.removeEventListener(evtName, func, false);
                } else if (obj.detachEvent !== undefined && obj.detachEvent !== null) {
                    obj.detachEvent(evtName, func);
                } else {
                    if (this.getAttribute("on" + evtName) !== undefined) {
                        obj["on" + evtName] = null;
                    } else {
                        obj[evtName] = null;
                    }
                }

            }

        </script>
    </body>
</html>

将图像从URL加载到文件输入字段

3 个答案: