JS实现浏览上传文件的代码

JS实现浏览上传文件的代码需要使用到HTML的input标签和JavaScript的FileReader API，下面为你详细讲解实现步骤：

HTML部分

首先需要在HTML中创建一个input标签，设置type属性值为file，添加一个change事件监听器，如下所示：

<input type="file" id="input-file" onchange="handleFileSelect()" />

注意，这里为input标签添加了一个id属性，方便在JavaScript代码中获取该元素。

JavaScript部分

接下来，需要编写JavaScript代码来实现文件上传的功能。

获取选择的文件

使用FileReader API来获取选中的文件，代码如下：

function handleFileSelect() {
  const input = document.getElementById('input-file');
  const files = input.files;

  // 处理选中的文件
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    // ...
  }
}

首先获取input标签元素，然后通过file属性获取被选中的文件列表，遍历文件列表，对于每个文件进行处理。

读取文件内容

通过FileReader API读取文件内容，并显示到页面上，代码如下：

function handleFileSelect() {
  const input = document.getElementById('input-file');
  const files = input.files;

  // 处理选中的文件
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = e.target.result;
      // 显示文件内容
      const div = document.createElement('div');
      div.innerHTML = data;
      document.body.appendChild(div);
    };
    reader.readAsText(file);
  }
}

对于每个文件，创建FileReader对象，并设置onload事件处理函数，该函数会在读取文件内容完成后被调用。读取文件内容使用readAsText方法，将文件内容作为字符串返回，然后将读取到的文件内容显示到页面上。

示例

下面给出两个示例来说明如何实现上传文件的功能。

示例1：读取图片文件并显示图片

HTML部分

<input type="file" id="input-file" onchange="handleFileSelect()" />

<div id="image-container"></div>

JavaScript部分

function handleFileSelect() {
  const input = document.getElementById('input-file');
  const files = input.files;

  // 处理选中的文件
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = e.target.result;
      // 显示图片
      const img = document.createElement('img');
      img.src = data;
      img.style.width = '200px';
      document.getElementById('image-container').appendChild(img);
    };
    reader.readAsDataURL(file);
  }
}

该示例中，读取选中的图片文件，使用readAsDataURL方法将图片文件转换为base64编码的字符串，然后将该字符串作为图片的src属性值，显示图片。

示例2：读取文本文件并显示内容

HTML部分

<input type="file" id="input-file" onchange="handleFileSelect()" />

<div id="text-container"></div>

JavaScript部分

function handleFileSelect() {
  const input = document.getElementById('input-file');
  const files = input.files;

  // 处理选中的文件
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = e.target.result;
      // 显示文本内容
      const div = document.createElement('div');
      div.innerHTML = data;
      document.getElementById('text-container').appendChild(div);
    };
    reader.readAsText(file);
  }
}

该示例中，读取选中的文本文件，使用readAsText方法将文件内容作为字符串返回，然后将该字符串作为div元素的innerHTML属性值，显示文件内容。