Question

<img id="uImage" src="C:\Image.jpg" >
<input type="file" name="file" id="ufile" />

如何将图像转换为文件对象？或者我如何创建/声明新的File（）并使用javascript手动插入。

Answer 1

通常，无法将文件添加到<input type=file ...>元素。

但您可以通过FormData和XMLHttpRequest或fetch将File对象上传到服务器。

//加载src并转换为File实例对象
//适用于任何类型的src，而不仅仅是图像src //返回使用File实例解析的promise

function srcToFile(src, fileName, mimeType){
    return (fetch(src)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], fileName, {type:mimeType});})
    );
}

使用示例:(适用于Chrome和Firefox）
将src转换为File并上传到服务器

srcToFile('/images/logo.png', 'logo.png', 'image/png')
.then(function(file){
    var fd = new FormData();
    fd.append('file1', file);
    return fetch('/upload.php', {method:'POST', body:fd});
})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;

如何使用Javascript将Image对象转换为File对象

1 个答案: