Backbone.js、jQuery、Node.jsを使用して、フォームのファイルをシリアル化してアップロードし、mongoデータベースに保存できるようにするにはどうすればよいですか?

ジョーc

応募者が特定の求人の履歴書をアップロードできるように、ファイルアップローダーを作成しようとしています。ファイルアップロード入力を除くすべてのフォームの値を取得できます。ファイルをアップロードしてシリアル化し、(サーバー上のフォルダーではなく)mongodbドキュメントに保存するにはどうすればよいですか?

テンプレート:

<form id="applicants" enctype="multipart/form-data">
    <label for="firstName">First Name:</label> <input type="text" id="first-name" /><br/>
    <label for="lastName">Last Name:</label> <input type="text" id="last-name" /><br/>
    <label for="email">Email:</label> <input type="text" id="email" /><br/>
    <label for="phone">Phone:</label> <input type="text" id="phone" /><br/>
    <br/>
    <label for="resume">upload resume</label><input type="file" id="resume" /> | <a href="#employment"><< Back</a>
    <input type="submit" value="submit resume" id="submit-resume">
</form>

見る:

var Marionette = require('backbone.marionette');

module.exports = itemView = Marionette.ItemView.extend({
    initialize: function() {
        // console.log("jobDetails itemView init");
        this.listenTo(this.model, 'change', this.render);
        // console.log("view's model ._id: ", this.model.attributes.get('_id'));
    },
    events: {
        'click #submit-resume': 'save'
    },

    template: require('../../templates/job_post_details.hbs'),

    save: function(e) {
        e.preventDefault();
        //console.log(this.model.attributes.get('_id'));

        var newApplicant = {
            firstName: this.$el.find('#first-name').val(),
            lastName: this.$el.find('#last-name').val(),
            phone: this.$el.find('#phone').val(),
            email: this.$el.find('#email').val(),
            jobPosts: [ this.model.attributes._id ],
            resume: this.$('#resume').submit() // how to I obtain this data and serialize?
        };

        console.log("newApplicant: ", newApplicant);


        window.App.controller.newApplicantCreate(newApplicant);
    }
});

サーバー側コード:

app.post('/api/applicants', job_post_applicants.add); 

ルートトリガーは、以下のコントローラーに機能を追加します。

    add: function( req, res, next ) {
        console.log("req: ", req);
        console.log("res: ", res);

        var newApplicant = new models.Applicant( req.body );
        newApplicant.save( function( err, Applicant ) {
            if (err) {
                res.json({ error: 'Unable to create new Applicant.' });
            } else {
                res.json(Applicant);
                console.log("added the Applicant: ", Applicant);
            }
        });
    }
};

ログは次のとおりです。

POST /api/applicants 200 37ms - 238b
added the Applicant:  { __v: 0,
  firstName: 'John',
  lastName: 'Doe',
  phone: '555.555.5555',
  email: '[email protected]',
  _id: 544eb24e9698b900000b5de9,
  resume: {},  <=== how to I populate with serialized data?
  createdAt: Mon Oct 27 2014 16:59:58 GMT-0400 (EDT),
  jobPosts: [ 544995891887bd411b4f02ee ] }
ウィリアム・フォーティン

FormDataオブジェクトを使用して、それをデータとして送信できます。

var form = new FormData(); 
form.append('firstName', this.$el.find('#first-name').val());
//... append all data
// Append resume file
form.append("resume", $("#resume")[0].files[0]);

そして、それを「multipart / form-data」コンテンツタイプとして送信します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ