js 动态生成 input type=file并且获取选择的文件转成base64

可以使用JavaScript动态生成input type=file元素，然后通过事件监听获取选择的文件并将其转换成base64格式。

首先，创建一个HTML元素来容纳动态生成的input元素和显示base64数据的元素。

<div id="container">
  <input type="file" id="file-input">
  <div id="base64-output"></div>
</div>

然后，在JavaScript中使用以下代码动态生成input元素，并监听其change事件。

document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('container');
  var fileInput = document.createElement('input');
  fileInput.setAttribute('type', 'file');
  fileInput.setAttribute('id', 'file-input');
  container.appendChild(fileInput);

  fileInput.addEventListener('change', handleFileSelect, false);
}, false);

在change事件的回调函数中，可以获取选择的文件并将其转换成base64格式。

function handleFileSelect(event) {
  var file = event.target.files[0];
  var reader = new FileReader();

  reader.onload = function(event) {
    var base64 = event.target.result;
    var output = document.getElementById('base64-output');
    output.innerText = base64;
  };

  reader.readAsDataURL(file);
}

在上述代码中，我们使用FileReader对象读取选择的文件，并在读取完成后的onload事件中获取base64数据，并将其显示在base64-output元素中。

这样，当用户选择文件后，就会动态生成input元素，并且可以获取选择的文件并将其转换成base64格式。