从 url 设置文件输入文件

Question

我有一个文件输入：

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

我有一个预览图：

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

我想将图像设置为 file-input#myImageInput 的文件。

我尝试什么：

从 img#myImagePreview 创建 Base64：

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;

})

创建 DataTransfer 并将 base64Image 添加到其中：

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 #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: ""

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

现在我尝试从 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

您的 File 构造函数不正确，文件数据是第一个参数，文件名是第二个参数。此外，您将 base64 数据而不是二进制数据放入文件中。下面的 bob 用于创建 File 而不是 base64 字符串。function toDataUrl(url, callback) {&nbsp; &nbsp; var xhr = new XMLHttpRequest();&nbsp; &nbsp; xhr.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; callback(xhr.response);&nbsp; &nbsp; };&nbsp; &nbsp; xhr.open('GET', url);&nbsp; &nbsp; xhr.responseType = 'blob';&nbsp; &nbsp; xhr.send();}let image;toDataUrl("http://myImageUrl",function(x){&nbsp; &nbsp; image = x;})...const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655new DataTransfer(); // specs compliant (as of March 2018 only Chrome)dT.items.add(new File([image], 'myNewFile'));document.querySelector('#myImageInput').files = dT.files;