前端写一个类似于微信发送文件展示在页面上的功能

你可以使用HTML5的File API来实现类似微信发送文件展示在页面上的功能。以下是一个简单的示例代码：

HTML部分：

<input type="file" id="fileInput">
<div id="fileDisplayArea"></div>

JavaScript部分：

document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);

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

  reader.onload = function(event) {
    const fileContent = event.target.result;
    const fileDisplayArea = document.getElementById('fileDisplayArea');
    fileDisplayArea.innerText = fileContent;
  };

  reader.readAsText(file);
}

以上代码创建了一个文件选择的输入框和一个用于展示文件内容的区域。当用户选择文件后，触发`handleFileSelect`函数。该函数使用`FileReader`对象读取文件内容，并将其显示在页面上。

注意：该示例只适用于文本文件的展示，如果要展示其他类型的文件（如图片、视频等），需要使用不同的方式进行处理。