1

これに答えるにはいくつかの方法があります。node-upload-progressを使用したソリューション、またはアップロードの進行状況を監視できる Express/手ごわいソリューションを喜んで受け入れます(どちらも気に入っていますが、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がビルトインの手ごわいサポートをドロップ/ドロップするまで。

これをどのように処理するかについての良いアイデアや例はありますか? Express や手ごわいオファーなどの便利なモジュールをよりよく理解し、評価できるように、 node-upload-progress に固執し、追加のフォーム値を最初から解析する方法を理解するように私の直感は言います。

事前にnode.jsの新しい人を助けてくれてありがとう. :D

4

0 に答える 0