javascript-使用新下载的图像填充输入[type=file]

如何使用

javascript

将下载的图像直接填充到

我有一个网站，允许用户分别用2个

更改

头像

图像和

背景

图像。之后，

avatar

和

background

将很好地显示在页面上

但是，如果用户A已经上传了

化身

和

背景

，下一轮他只想更改

背景

，他将单击

背景

，并更改

背景

。并保持

avatar

按钮未动。如果是这种情况，我需要将

头像

图像（已从服务器下载）直接放入

中，然后执行

上传图像

功能：

function uploadImage(){
        var formData = new FormData();
        formData.append('Avatar',$('#avatar')[0].files[0]);
        formData.append('Background',$('#background')[0].files[0]);

        $.ajax({
        url: uploadurl,
        type: 'POST',
        data: formData,
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        headers:{
                Authorization : getPref('auth_token')
            },
        success: function (data) {
            console.log(data);
            myApp.alert("Upload done!",null);
        },
          error:function(xhr, status)
          {
            console.log(status);
            myApp.alert("Please try again later.",'Connection fail!',null);
          }
        });
}

但我不知道如何从下载url获取图像文件

---

如何解决这个问题？

我认为Javascript不允许预先填充

文件

输入。出于安全原因，用户必须明确选择它，以防止网站强制进行不必要的上传。为什么不允许头像输入为空？如果用户已经有了一个头像，并且该字段为空，则将其留在服务器上。在这种情况下，您完全不需要填写文件输入，您可以直接将其作为Blob发送到formData中（但我想知道为什么您甚至需要这样做，添加id，只上载所需的图像，进行合并服务器端），是否有一种方法可以让我获得我已经下载的图像文件，并且可以直接

append（）

上传过程？是

xhr.open（'yourfile.jpg'）xhr.responseType='blob'xhr.onload=function（）{yourfile=this.response；}

甚至

fetch（'yourFile.jpg'）。然后（函数（response）{return response.blob（）；}）。然后（函数（yourBlob）{…