JavaScript 动态生成文件上传控件并获取 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 格式。