从 url 设置文件输入文件

Question

我有一个文件输入：

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

我有预览图：

<img src="http://myImageUrl" id="myImagePreview">

我想将图像设置为文件输入#myImageInput 的文件。

我的尝试：

Create Base64 from the img#myImagePreview:

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
            callback(reader.result);
        }
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

let base64Image;
toDataUrl("http://myImageUrl",function(x){
    base64Image = x;
})

Create DataTransfer and add the base64Image to it:

const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
dT.items.add(new File(['myNewFile'], base64Image ));
document.querySelector('#myImageInput').files = dT.files;

Console.log the #myImageInput.files:

0: File
lastModified: 1593986842957
lastModifiedDate: Mon Jul 06 2020 00:07:22 GMT+0200 (Central European Summer Time) {}
name: "data:image/jpeg;base64,/9j/4AAQSkZJRgABCSAQAASABIAAADD"
size: 9
type: ""
webkitRelativePath: ""

这看起来不对，但它实际上设置了一个“文件”...

Now I try to preview the new image from the myImageInput:

function previewFile() {
  var preview = document.querySelector('#myImagePreview');
  var file    = document.querySelector('#myImageInput').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
    console.log(reader.result);
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

previewFile();

但是图片坏了。 #myImagePreview:

<img src="data:application/octet-stream;base64,bXlOZyXdGacWxl" id="myImagePreview">

我需要给 DataTransfer.items 一个 blob 吗？一个 base64 或一个 fileObject 来使这个工作？

Answer 1

你的文件构造函数不正确，文件数据是第一个参数，文件名是第二个参数。
此外，您将 base64 数据而不是二进制数据放入文件中。
下面的 bob 用于创建文件而不是 base64 字符串。

function toDataUrl(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.onload = function() {
        callback(xhr.response);
    };
    xhr.open('GET', url);
    xhr.responseType = 'blob';
    xhr.send();
}

let image;
toDataUrl("http://myImageUrl",function(x){
    image = x;
})

...

const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
dT.items.add(new File([image], 'myNewFile'));
document.querySelector('#myImageInput').files = dT.files;

从 url 设置文件输入文件

Set file-input file from url

html

javascript

blob

file