Chrome：使用 Javascript 从 blob 创建文件输入？答案

【问题标题】：Chrome: Create file input from blob with Javascript?Chrome：使用 Javascript 从 blob 创建文件输入？
【发布时间】：2012-07-29 05:02:12
【问题描述】：

好吧，input[type=file] 的文件属性是只读的。因此，我无法将我的 blob 数据写入此输入元素。

但是如果我使用Javscript 创建一个新的输入文件元素，那么可以在创建时插入 blob 数据吗？我只对在 chrome (extension) 中工作的解决方案感兴趣 - 其他浏览器无关紧要。

【问题讨论】：

我最近试过了，还是不行。想要修改<input type=file> 中的文件的唯一用例是当您想要在上传之前更改文件时。如果您正在寻找实现此目的的方法，请使用 XMLHttpRequest 2 级规范中的 FormData 函数。代码示例可以在stackoverflow.com/a/11628694（可能重复的问题？）和stackoverflow.com/a/11382138 找到
@RobW 设置文件输入的值也是一种方便的方式来向用户指示他们的上传是有效/无效的，特别是当他们可以选择从磁盘选择文件或创建文件时浏览器中的文件（即通过getUserMedia）。这是我的用例 - 当浏览器默认不支持时（很少有浏览器支持），从麦克风填写文件输入框。

标签： file google-chrome input google-chrome-extension blob

【解决方案1】：

new File() 构造函数在 chromium / chrome 38+ 可用。见File Constructor Sample，File API。

var date = new Date(),
  filename = "file-" + date.getTime() + ".html";

var generatedFile = new File(
  ["<!DOCTYPE html><html><body>" + filename + "</body></html>"]
  , filename
  , {
  type: "text/html",
  lastModified: date
  }
);

var objUrl = URL.createObjectURL(generatedFile);

console.log(generatedFile, objUrl);

var reader = new FileReader();

reader.addEventListener("load", function(event) {
  console.log(event.target.result)
});

reader.readAsText(generatedFile);

【讨论】：

【解决方案2】：

您可以查看我的示例，了解要输入的流程文件、输入为 blob 的 url、输入到 img 标签预览 https://vulieumang.github.io/vuhocjs/file2input-input2file/

var btnLoadUrl = document.querySelector('#loadUrl');
btnLoadUrl.addEventListener("click", ()=>{
  var url = document.querySelector('#url').value;
  loadURLToInputField(url)
});

var btnLoadImage = document.querySelector('#loadImage');
btnLoadImage.addEventListener("click", ()=>{
  var img_preview = document.querySelector('#img-preview');
  console.log(img_preview)
  loadInputFieldToPreview(img_preview)
});

var file_browser = document.querySelector('#file_browser');
var img_preview2 = document.querySelector('#img-preview2');
file_browser.addEventListener('change',()=>{
  var reader = new FileReader();
  reader.onload = function(e) {
    img_preview2.src = e.target.result
  }
  reader.readAsDataURL(document.querySelector('#file_browser').files[0]);
})

function loadURLToInputField(url){
  getImgURL(url, (imgBlob)=>{
    // Load img blob to input
    // WIP: UTF character error
    let fileName = 'hasFilename.jpg'
    let file = new File([imgBlob], fileName,{type:"image/jpeg", lastModified:new Date().getTime()}, 'utf-8');
    let container = new DataTransfer(); 
    container.items.add(file);
    document.querySelector('#file_input').files = container.files;
    // document.querySelector('#status').files = container.files;
    
  })
}

function loadInputFieldToPreview(imgElement){
  // Load preview to img tag
  var reader = new FileReader();
  reader.onload = function(e) {
    imgElement.src = e.target.result
  }
  reader.readAsDataURL(document.querySelector('#file_input').files[0]); // convert to base64 string
}

// xml json res
function httpGetAsync(url, callback){
  var req = new XMLHttpRequest();
  req.responseType = 'json';
  req.open('GET', url);
  req.onload  = function() {
    var jsonResponse = req.response;
    callback(jsonResponse)
    // do something with jsonResponse
  };
  req.send(null);
}

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

//check input status
setInterval(() => {
  var input = document.querySelector('#file_input');
  var status = document.querySelector('#status');
  if(input.value){
    status.innerHTML = 'has input'
    
  } else {
    status.innerHTML = 'empty input'
  }
}, 500);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>URL, file to input and preview</title>
  
</head>
<body>
  <h1>Load URL to input</h1>
  <input width="100%" id='url' type="text" placeholder="paste url image here" value="https://cloudinary-res.cloudinary.com/image/upload/dpr_2.0,c_scale,f_auto,q_auto,w_156/cloudinary_logo_for_white_bg.svg">
  <button id="loadUrl">Load URL to input type file</button>
  <input id='file_input' type="file">
  <span>status input file type: <span id="status"></span></span>
 
  <h1>Load input to preview</h1>
  <button id="loadImage" >Load input above to preview</button>
  <img src="" id='img-preview' alt="img-preview">

  <h1>Load input file browser to preview</h1>
  <input type="file" name="" id="file_browser">
  <img src="" id='img-preview2' alt="preview2">

  <script src="script.js"></script>
</body>
</html>

【讨论】：