js本地读取的文件放到不同的容器下

可以使用HTML5的File API来读取本地文件，并将其放到不同的容器下。

首先，使用input元素创建一个文件选择器，让用户选择要读取的文件：

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

然后，使用JavaScript代码来读取文件：

var fileInput = document.getElementById('file-input');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function() {
  var fileContent = reader.result;
  // 处理文件内容
};
reader.readAsText(file);

在onload事件处理程序中，可以将文件内容放到不同的容器中，比如文本区域、图像元素、音频元素等：

var fileInput = document.getElementById('file-input');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function() {
  var fileContent = reader.result;
  var textArea = document.getElementById('text-area');
  textArea.value = fileContent;
  var image = document.getElementById('image');
  image.src = fileContent;
  var audio = document.getElementById('audio');
  audio.src = fileContent;
};
reader.readAsDataURL(file);

在这个例子中，使用了readAsDataURL方法来读取文件，并将文件内容转换为Base64编码的字符串，然后分别将字符串赋值给文本区域、图像元素和音频元素的src属性。可以根据具体需求选择不同的读取方法和容器类型。