Question

有几种方法可以解答这个问题。我会兴高采烈地接受一个node-upload-progress的解决方案，或者一个快速/强大的解决方案，允许上传进度监控（我喜欢这两个，但Express最近因强大的支持而下降让我的大脑爆炸）

我尝试创建一个页面，其中可以使用进度监控上传文件，以及与文件相关的其他字段，如标题，提交者名称，文件描述等。

我找到的第一个部分解决方案是node-upload-progress。它很快就运作良好。这里是粘贴在这里的示例代码供参考（我添加了一个额外的字段，我想得到它的值）。

app.js

(function() {
    var app = require('http');
    var fs = require('fs');
    var uploadProgress = require('node-upload-progress');
    var uploadHandler = new uploadProgress.UploadHandler;

    uploadHandler.configure(function() {
        this.uploadDir = "" + __dirname + "/uploads";
        this.onEnd = customOnEndHandler;
    });

    function customOnEndHandler(req, res){
        res.writeHead(200, {'Content-Type': 'text/plain'});
        res.end('Yay! Upload finished.');
    }

    app.createServer(function(req, res) {
        if (req.url.match(/\/upload\?X\-Progress\-ID=.+/)) {
            console.log('upload started');
            return uploadHandler.upload(req, res);
        } else if (req.url.match(/\/progress\?X\-Progress\-ID=.+/)) {
            return uploadHandler.progress(req, res);
        } else {
            return fs.readFile("" + __dirname + "/index.html", function(err, data) {
                res.writeHead(200, {
                  'Content-Type': 'text/html'
                });
                res.write(data.toString());
                return res.end();
            });
        }
    }).listen(8080);

    console.log('Server running at http://localhost:8080/');

}).call(this);

的index.html：

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Upload</title>
    <meta name="author" content="Pablo Cantero <pablo@pablocantero.com>">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- Date: 2012-06-12 -->
    <script>
        $(function(){
            var uploadIntervalID;
            $('#form_upload').submit(function(){
                // Preventing multiples clicks on upload
                clearInterval(uploadIntervalID);
                var xProgressID = guidGenerator();
                $(this).attr('action', '/upload?X-Progress-ID=' + xProgressID);
                uploadIntervalID = setInterval(function(){
                    $.get('/progress?X-Progress-ID=' + xProgressID, function(data){
                        if(data.status === 'done'){
                            clearInterval(uploadIntervalID);
                        }
                        updateUploadStatus(data);
                    }).error(function(){clearInterval(uploadIntervalID)});
                }, 250);
                return true;
            });

            function updateUploadStatus(data){
                $('#upload_percent').text(data.percent);
                $('#upload_status').text(data.status);
                $('#upload_filename').text(data.fileName);
                $('#upload_filepath').text(data.filePath);
            }

            // http://stackoverflow.com/a/105074/464685
            function guidGenerator() {
                return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
            }

            function S4() {
                return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
            }
        });
    </script>
</head>
<body>
    <h1>Super Upload</h1>
    <form action="/upload?X-Progress-ID=1" enctype="multipart/form-data" method="post" id="form_upload" target="iframe_upload">
        <p>
            <label>File</label><br/>
            <input type="file" name="upload" id="upload"><br>
            <span id="upload_percent"></span><br/>
            <span id="upload_status"></span><br/>
            <span id="upload_filename"></span><br/>
            <span id="upload_filepath"></span>
        </p>

        <p>
            <div>File Title</div>
            <input name="file-title" type="text" maxlength="120" value="test value" />
        </p>

        <p>
            <input type="submit" value="Upload">
        </p>
    </form>
    <iframe id="iframe_upload" name="iframe_upload"></iframe>
</body>
</html>

当进一步研究表单解析时，我开始发现强大的东西是使用的东西，并且它与Express（这非常适合提供我想要创建的前端并提供更简单的基本身份验证来访问它）非常有用......直到Express掉线/正在放弃内置的强大支持。

有关如何解决此问题的任何好主意和/或示例？我的直觉是坚持使用node-upload-progress并弄清楚如何从头开始解析其他表单值，这样我就能更好地理解和欣赏Express和强大的功能等便利模块。

感谢您提前帮助node.js新人。：d

Node.js：在解析其他表单字段时，如何使用node-upload-progress监控文件上传？

0 个答案: