將 URL 中的圖像加載到文件輸入字段中

Question

是否可以使用 JavaScript 將圖像 URL 放入准備提交的<input type="file">中？ 或者達到類似的效果？ 實際上，我的圖片位於http://example.com/xxx/image.jpg ，我想將其“預加載”到使用注冊表中，這樣它就可以與表單一起提交，就好像它是從使用輸入字段的磁盤。

案例場景是從 API 獲得的用戶數據，我想用它來填充用戶注冊表單，其中一個字段是用戶的頭像，API 將其作為 URL 移交。

這不是關於如何使用輸入字段預覽從磁盤中選擇的圖像！

Answer 1

這不可能。 作為替代解決方案，您可以使用input[type="url"]然后在提交時創建要使用 JavaScript 上傳的文件：

async function getFileFromUrl(url, name, defaultType = 'image/png') {
  const response = await fetch(url)
  const data = await response.blob()
  return new File([data], name, {
    type: data.type || defaultType,
  })
}

或者不使用此 function，您可以將其轉換為 base64：

async function getBase64FromUrl(url) {
  let reader = new FileReader();
  const response = await fetch(url)
  const data = await response.blob()

    return await new Promise((resolve, reject) => {
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(data);
  })
}

並上傳 base64 字符串。

Answer 2

使用 FileReader API 的示例。 這將加載在圖像 html 對象中的文件對象中加載的圖像。

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

Answer 3

出於安全原因，輸入 type="file" 的值以編程方式是只讀的，所以不，這是不可能的。

參考鏈接： https : //www.w3schools.com/jsref/prop_fileupload_value.asp

Answer 4

正如 Jahl 所說，出於安全原因不能這樣做，但作為替代方案，您可以有一個隱藏的輸入值並填充它。 顯示圖像並可以選擇提交不同的圖像——如果沒有提交其他圖像，則默認使用加載的頭像。

將 URL 中的圖像加載到文件輸入字段中

問題描述

4 個解決方案

解決方案1
2 2022-03-10 12:03:12

解決方案2
1 2018-02-16 03:24:39

解決方案3
0 已采納 2018-02-15 23:36:25

解決方案4
0 2018-02-16 01:05:36

將 URL 中的圖像加載到文件輸入字段中

問題描述

4 個解決方案

解決方案1 2 2022-03-10 12:03:12

解決方案2 1 2018-02-16 03:24:39

解決方案3 0 已采納 2018-02-15 23:36:25

解決方案4 0 2018-02-16 01:05:36

解決方案1
2 2022-03-10 12:03:12

解決方案2
1 2018-02-16 03:24:39

解決方案3
0 已采納 2018-02-15 23:36:25

解決方案4
0 2018-02-16 01:05:36