亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從 url 設置文件輸入文件

從 url 設置文件輸入文件

暮色呼如 2022-11-03 10:11:10
我有一個文件輸入:<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=1422655new 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: FilelastModified: 1593986842957lastModifiedDate: Mon Jul 06 2020 00:07:22 GMT+0200 (Central European Summer Time) {}name: "data:image/jpeg;base64,/9j/4AAQSkZJRgABCSAQAASABIAAADD"size: 9type: ""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 來完成這項工作?
查看完整描述

1 回答

?
米琪卡哇伊

TA貢獻1998條經驗 獲得超6個贊

您的 File 構造函數不正確,文件數據是第一個參數,文件名是第二個參數。

此外,您將 base64 數據而不是二進制數據放入文件中。

下面的 bob 用于創建 File 而不是 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;


查看完整回答
反對 回復 2022-11-03
  • 1 回答
  • 0 關注
  • 104 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號