使用 HTML input 元素上传本地文件,在服务器端打印出上传的内容

简介: 使用 HTML input 元素上传本地文件,在服务器端打印出上传的内容

需求


在本地通过 HTML input 元素,支持上传多个文本文件到服务器。


服务器采取 Node.js 实现,将本地上传的文本文件内容打印出来。


实现效果


先看一下本文介绍的代码片段执行的效果。


本文介绍的程序,启动了一个在 3003 端口上监听的服务器。浏览器访问 localhost:3003,能看到如下界面:


点击 Choose Files,弹出文件上传对话框,可以选择上传多个本地文本文件。

f3b4b527b2c393e6e34a4d6ebf6c666f.png

这里我选择了本地两个名为 1.txt 和 2.txt 的文本文件,内容分别为:

b32ab07947073fc506d327d23f6d94a9.png

选定之后,Choose Files 控件右边,显示为 2 files,意思是有两个本地文件等待上传。

2a9fdbb06bf2b023abe70b1ff42e99c9.png

点击上图的 upload your file 之后,在服务器的控制台,能看到依次打印出第一个文件的文件名,文件内容,然后是第二个文件的文件名,文件内容,说明上传成功:

ac975101b1efc68479e7998c793e1de4.png

下面是本需求具体的实现步骤。


实现步骤


本需求采取 Node.js 技术栈实现。


使用 npm init 命令行新建一个基于 npm 的 Node.js 项目,package.json 文件内容如下:

{
  "name": "file.upload.test",
  "version": "1.0.0",
  "author": "Jerry",
  "description": "File upload test",
  "scripts": {
    "start": "ui5 serve",
    "build": "ui5 build"
  },
  "devDependencies": {
    "express": "^4.12.4"
  },
  "dependencies": {
    "multiparty": "^4.2.3"
  }
}


从 package.json 文件的 dependencies 区域能看出,我们使用了一个叫做 multiparty 的库。


新建一个 fileUploadServer.js 文件,完整源代码只有 33 行,内容如下:


var multiparty = require('multiparty');
var http = require('http');
var util = require('util');
const PORT = 3003;
http.createServer(function(req, res) {
  if (req.url === '/upload' && req.method === 'POST') {
    var form = new multiparty.Form();
    form.on('part', function(part) {
        console.log(part.filename);
        part.setEncoding('utf8');
        part.on('data',function (chunk){
          console.log(chunk)
        });
        part.on('end',function (){
          console.log('读取结束');
        });
    });
    form.parse(req);
  }
  res.writeHead(200, { 'content-type': 'text/html' });
  res.end(
    '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="upload your file">'+
    '</form>'
  );
}).listen(PORT);
console.log('listen on port:' + PORT);


进入 package.json 和 fileUploadServer.js 文件所在的文件夹,执行命令行 npm install,安装 package.json 文件里定义的依赖,然后命令行 node fileUploadServer.js, 就可以启动服务器了:

262ac407559d277d55a265a7951e90b1.png

看到提示消息 listen on port:3003 说明服务器启动成功了,接下来按照文件前面提示的步骤进行测试即可。


目录
相关文章
|
6月前
|
前端开发
【HTML专栏2】VSCode的使用(新建HTML文件)
【HTML专栏2】VSCode的使用(新建HTML文件)
495 0
|
12天前
|
Web App开发 前端开发 搜索推荐
创建HTML文件
【10月更文挑战第14天】创建HTML文件
28 4
|
25天前
|
JSON 数据格式
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
LangChain-20 Document Loader 文件加载 加载MD DOCX EXCEL PPT PDF HTML JSON 等多种文件格式 后续可通过FAISS向量化 增强检索
48 2
|
28天前
|
移动开发 JavaScript 前端开发
HTML5 服务器发送事件(Server-Sent Events)详解
**服务器发送事件(Server-Sent Events, SSE)** 是一种用于构建单向实时通信的技术,允许服务器主动向客户端(通常是浏览器)推送更新。SSE 提供了一个简单的 API,非常适合实时应用,如新闻更新、天气变化、社交媒体通知等。SSE 基于 HTTP 协议,通过长连接实现数据传输。其主要优点包括简洁的 API、持久连接和自动重连功能。大多数现代浏览器都内置了对 SSE 的支持。通过简单的服务器端和客户端代码,可以轻松实现数据的实时推送和接收。
|
14天前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
20 0
|
6月前
|
XML 前端开发 数据格式
BeautifulSoup 是一个 Python 库,用于从 HTML 和 XML 文件中提取数据
【5月更文挑战第10天】BeautifulSoup 是 Python 的一个库,用于解析 HTML 和 XML 文件,即使在格式不规范的情况下也能有效工作。通过创建 BeautifulSoup 对象并使用方法如 find_all 和 get,可以方便地提取和查找文档中的信息。以下是一段示例代码,展示如何安装库、解析 HTML 数据以及打印段落、链接和特定类名的元素。BeautifulSoup 还支持更复杂的查询和文档修改功能。
96 1
|
3月前
写一个HTML文件
【8月更文挑战第27天】写一个HTML文件。
38 1
|
3月前
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?
【Azure 应用服务】部署Azure Web App时,是否可以替换hostingstart.html文件呢?
|
4月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
5月前
|
JavaScript 前端开发 API
探讨JavaScript动态添加HTML文件的技术
探讨JavaScript动态添加HTML文件的技术
61 1