0

ember.js で jquery ファイルのアップロードを使用しようとしています。私が達成したいと思っているのは、ファイル入力があり、ユーザーが画像を参照してアップロードボタンを押すと、jquery ファイルのアップロードがファイルをアップロードし、アップロードされたファイルの場所を返します..から他のデータを収集しますフォームの残りの部分を削除し、ember データを使用して情報を投稿します。これには、画像の URL と残りのフォーム データが含まれます。

私はそれを機能させることはできませんが、同じコードが php バックエンドを持つプレーンな html ファイルで機能します。

ここでは、テンプレートと app.js コードを含む jsbin に機能しないコードを含めました。

http://jsbin.com/EtOzeKI/1/edit

4

2 に答える 2

3

使用できる最小限のコンポーネントは次のとおりです。

// index.html
<script src="/vendor/jquery/jquery.js"></script>
<script src="/vendor/jquery-ui/ui/jquery-ui.js"></script>
<script src="/vendor/jquery-file-upload/js/jquery.iframe-transport.js"></script>/script>
<script src="/vendor/jquery-file-upload/js/jquery.fileupload.js"></script>

// components/file-upload.js
export default Ember.TextField.extend({
    attributeBindings: ['name', 'data-url', 'multiple'],
    tagName: "input",
    type: 'file',
    name: "file[]",

    "data-url": function(){
        return this.get("path");
    }.property("path"),

    multiple: true,

    didInsertElement: function() {
        this.$().fileupload();
    }
});

// to use in your hbs template
{{file-upload path="pathToUploadTo"}}
于 2014-01-21T03:49:45.557 に答える
2

私のアプリケーションで使用するアップロード ボタンは次のとおりです。入力ボタンを構築し、変更時に自動アップロードします。

{{view App.UploadButton groupBinding="model"}}


App.UploadButton = Ember.View.extend({
    tagName: 'input',
    attributeBindings: ['type'],
    type: 'file',
    originalText: 'Upload Finished Product',
    uploadingText: 'Busy Uploading...',

    newItemHandler: function (data) {
        var store = this.get('controller.store');

        store.push('item', data);
    },

    preUpload: function () {
        var me = this.$(),
            parent = me.closest('.fileupload-addbutton'),
            upload = this.get('uploadingText');

        parent.addClass('disabled');
        me.css('cursor', 'default');
        me.attr('disabled', 'disabled');
    },

    postUpload: function () {
        var me = this.$(),
            parent = me.closest('.fileupload-addbutton'),
            form = parent.closest('#fake_form_for_reset')[0],
            orig = this.get('originalText');

        parent.removeClass('disabled');
        me.css('cursor', 'pointer');
        me.removeAttr('disabled');
        form.reset();
    },

    change: function (e) {
        var self = this;
        var formData = new FormData();
        // This is just CSS
        this.preUpload();
        formData.append('group_id', this.get('group.id'));
        formData.append('file', this.$().get(0).files[0]);
        $.ajax({
            url: '/file_upload_handler/',
            type: 'POST',
            //Ajax events
            success: function (data) { self.postUpload(); self.newItemHandler(data); },
            error: function () { self.postUpload(); alert('Failure'); },
            // Form data
            data: formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
        });
    }
});
于 2013-10-27T17:16:57.653 に答える