0

この質問に従って、Malsup の jQuery Form Plugin を使用してファイルを非同期的にアップロードしています。

ファイルのアップロードには最適ですが、ファイルと一緒に追加データを送信することに興味があります (ファイルをアップロードした人のユーザー名など)。

この追加データを追加する方法はありますか?

ファイルをアップロードするために機能する現在のコードは次のとおりです。

<input type=file/>(を含む HTML フォームの標準を想定id=upload)

// site/js/app.js

var app = app || {};

(function($){


})(jQuery);

// prepare the form when the DOM is ready 
$(document).ready(function() { 



         var options =
         { 
            url: 'http://localhost:3000/file_upload',
            dataType: 'json',
            success: function(response, statusText, xhr, form) 
            {
                alert('success!');
            }; 

        $("#upload").ajaxForm(options);

});
4

1 に答える 1

-2

数日間遊んだ後、答えを見つけました。

簡単に言えば、サーバーに送信されるすべてのものを含む「データ」の「オプション」プロパティがあります。フォームの使用が に設定されているenctype="multipart/form-data"場合、これはファイル タイプの入力のみを取得し、他のすべてを無視します。

ただし、他の入力フィールドの値にアクセスできる場合 ($! の仕事のように聞こえます)、特定のコールバック関数を使用して余分なデータを手動で追加できます。

これにより、jQuery コードは次のようになります。

// site/js/app.js

var app = app || {};

(function($){


})(jQuery);

/*
$('#upload').submit(function()
{

    alert('Handler for .submit() called.');
    return false;

})*/

// prepare the form when the DOM is ready 
$(document).ready(function() { 



         var options =
         { 
            url: 'http://localhost:3000/file_upload',
            dataType: 'json',

            beforeSubmit: function(arr, $form, options) 
            {
                //add additional data that is going to be submit
                //for example
                arr.push({ 'name': 'username',
                           'value': 'Jarrod Dixon'});
            }, 


        }; 

        $("#upload").ajaxForm(options);

});

私の場合、ウェブサーバーとして express.js を使用しています。これは、追加データが app.post の応答の「param」プロパティで として利用できることを意味しますreq.param('username')。

つまり、

app.post('/file_upload', function(req, res) {

    //see if we got the username
    console.log('name = '+ req.param('username'));
    //Jarrod Dixon
});

これが他の誰かの無益な検索時間を節約するのに役立つことを願っています!

于 2013-08-22T22:01:49.733 に答える