2

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

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

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

首先，这是文件上传表单本身。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模式，但它只是不会将任何内容发送回客户端-同时文件上传部分仍然可以正常工作。我需要在两个包之间建立某种握手吗？帮帮我。我是前端的人，所以我对后端的东西不太熟悉。我先把它放在一边，然后继续其他课程。

4

1 回答 1

0

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

我在这里解释了：如何在 Node.js 中将强大的文件上传连接到 socket.io

于 2014-04-21T23:05:21.120 回答