HTML 表单输入类型文件预选值 javascript

Question

这是一个自我回答的问题，旨在为所有找到 this 但仍然没有答案（我找不到）的人提供答案。预选文件 是可能的（至少对于图像）。这可能不太实用，但有可能。

Answer 1

解决方案如下：（适用于 Firefox 82.0.3 和最新 Chrome [11-2020]）
HTML:

<input id="my-input" type="file">

JavaScript:

const input = document.getElementById("my-input");  // your input element type="file"
const url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png"
// a url with a resource
const dt = new DataTransfer();  // create virtual DataTransfer object
const request = new XMLHttpRequest();   // create the HTTP request
request.open("GET", url, true);
request.responseType = "arraybuffer";
// with images this works. For other types you'll find an answer yourself eventually :)
const fileType = (url.substr(url.lastIndexOf(".") + 1));
const mimeType =  ("image/" + fileType).replace("jpg", "jpeg"); // there is no MIME type image/jpg only image/jpeg
request.overrideMimeType(mimeType); // idk if this is necessary but it works
request.onload = function (e) {
            const blob = new Blob([this.response], {type: mimeType});   // create Blob object from response
            const file = new File([blob], "your filename")      // create File object from Blob
            dt.items.add(file);     // add file to virtual DataTransfer
            input.files = dt.files;     // place input content with new content
}
request.send(); // execute request

const myImage = document.getElementById("my-selected-image");
const input = document.getElementById("my-input"); // your input element type="file"
const url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Test.svg/620px-Test.svg.png" // a url with a resource
window.onload = function() { // on document load
  const dt = new DataTransfer(); // create virtual DataTransfer object
  const request = new XMLHttpRequest(); // create the HTTP request
  request.open("GET", url, true);
  request.responseType = "arraybuffer";
  // with images this works. For other types you'll find an answer yourself eventually :)
  const fileType = (url.substr(url.lastIndexOf(".") + 1));
  const mimeType = ("image/" + fileType).replace("jpg", "jpeg"); // there is no MIME type image/jpg only image/jpeg
  request.overrideMimeType(mimeType); // idk if this is necessary but it works
  request.onload = function(e) {
    const blob = new Blob([this.response], {
      type: mimeType
    }); // create Blob object from response
    const file = new File([blob], "your filename." + fileType, {
      type: mimeType
    }) // create File object from Blob
    dt.items.add(file); // add file to virtual DataTransfer
    input.files = dt.files; // place input content with new content
    input.dispatchEvent(new Event("change"));
  }
  request.send(); // execute request
}

// only if you want to display the file
input.addEventListener("change", function() {
  const reader = new FileReader();
  reader.onload = function(e) {
    myImage.src = e.target.result;
    myImage.removeAttribute("hidden");
  };
  reader.readAsDataURL(input.files[0]);
})

<input id="my-input" type="file">
<img src="" id="my-selected-image" hidden>

HTML 表单输入类型文件预选值 javascript

HTML form input type file preselect value with javascript

html

javascript

forms

file-upload

input