上传文件与设置进度条

Posted 2023-04-27

参考技术A 1、引入bootstrap.css和jquery.js;
2、点击按钮后获取文件列表，添加到FormData，调用open函数指定类型与URL地址，在发起请求send（）；
3、监听onreadystatechange事件，当服务器回应后，把传回来的数据转换成JSON字符串，修改img的URL地址，让图片文件显示在页面中；
4、创建xhr对象开启监听文件上传进度，e.lengthComputable是true则计算进度条百分比，把结果给进度条；
5、进度条完成后，修改颜色，移除类添加类

html

JS

带有节点（socket.io 和强大）和 ajax 的文件上传进度条

【中文标题】带有节点（socket.io 和强大）和 ajax 的文件上传进度条

【英文标题】：a file upload progress bar with node (socket.io and formidable) and ajax

【发布时间】：2014-06-03 08:24:15

【问题描述】：

我正在自学一些 Ajax，本课需要在本地构建一个简单的文件上传表单。我在 Windows 7 上运行 XAMPP，并为http://test 设置了一个虚拟主机。书中的解决方案是使用 node 和一个几乎不为人知的名为“multipart”的包，它应该解析表单数据但对我来说很糟糕。

我为这项工作寻找了最好的包装，这似乎是令人生畏的。它可以解决问题，我的文件将在本地上传，我通过 Ajax 获取所有详细信息。但是，它不会与书中简单的 JS 代码配合使用，该代码用于在进度元素中显示上传进度。所以，我环顾四周，人们建议使用 socket.io 将进度信息发送回客户端页面。

我已经成功地在本地工作，并且我已经设法让 socket.io 使用一些基本教程。现在，我这辈子都无法让他们一起工作。我什至无法从 socket.io 将简单的控制台日志消息发送回我的页面，而 formidable 会做它的事情。

首先，这是文件上传表单本身。 upload.html 页面内的脚本：

document.getElementById("submit").onclick = handleButtonPress;
var httpRequest;

function handleResponse() 
    if (httpRequest.readyState == 4 && httpRequest.status == 200) 
        document.getElementById("results").innerHTML = httpRequest.responseText;
    


function handleButtonPress(e) 
    e.preventDefault();

    var form = document.getElementById("myform");
    var formData = new FormData(form);

    httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = handleResponse;
    httpRequest.open("POST", form.action);
    httpRequest.send(formData);

这是相应的节点脚本（重要的部分是 form.on('progress')

var http = require('http'),
    util = require('util'),
    formidable = require('formidable');

http.createServer(function(req, res) 
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') 
    var form = new formidable.IncomingForm(),
        files = [],
        fields = [];

    form.uploadDir = './files/';
    form.keepExtensions = true;

    form
      .on('progress', function(bytesReceived, bytesExpected) 
        console.log('Progress so far: '+(bytesReceived / bytesExpected * 100).toFixed(0)+"%");
      )
      .on('file', function(name, file) 
        files.push([name, file]);
      )
      .on('error', function(err) 
        console.log('ERROR!');
        res.end();
      )
      .on('end', function() 
        console.log('-> upload done');
        res.writeHead(200, "OK", 
            "Content-Type": "text/html", "Access-Control-Allow-Origin": "http://test"
        );
        res.end('received files: '+util.inspect(files));
      );
    form.parse(req);
   else 
    res.writeHead(404, 'content-type': 'text/plain');
    res.end('404');
  
  return;
).listen(8080);

console.log('listening');

好的，所以一切都按预期工作。现在这是最简单的 socket.io 脚本，我希望将其注入前两个脚本中，以将进度信息发送回我的页面。这是客户端代码：

var socket = io.connect('http://test:8080');

socket.on('news', function(data)
    console.log('server sent news:', data);
);

这是服务器端节点脚本：

var http = require('http'),
    fs = require('fs');

var server = http.createServer(function(req, res) 
    fs.createReadStream('./socket.html').pipe(res);
);

var io = require('socket.io').listen(server);

io.sockets.on('connection', function(socket) 
    socket.emit('news', hello: "world");
);

server.listen(8080);

所以这本身就可以正常工作，但是当我尝试将 socket.io 代码放在我的表单中时，我的问题就来了。我尝试将它放在任何可能远程有意义的地方，我尝试了异步fs.readFile 的模式也是如此，但它不会将任何内容发送回客户端 - 同时文件上传部分仍然可以正常工作。我需要在两个包之间建立某种握手吗？帮帮我。我是前端的人，所以我对后端的东西不太熟悉。我先把它放在一边，然后继续其他课程。

【参考方案1】：

也许您可以为一个客户创建一个房间，然后将百分比广播到这个房间。

我在这里解释过：How to connect formidable file upload to socket.io in Node.js