javascript - Ember 与 jquery 文件上传

Question

我正在尝试将 jquery 文件上传与 ember.js 一起使用。我希望实现的是有一个文件输入，当用户浏览图片并点击上传按钮时，jquery 文件上传将上传文件并返回上传文件的位置。我将从中收集其他数据表单的其余部分并使用 ember 数据发布信息，其中将包括图像 url 和表单数据的其余部分。

我无法使其工作，但相同的代码适用于带有 php 后端的纯 html 文件。

在这里，我在 jsbin 中包含了非功能代码，其中包括我的模板和 app.js 代码

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

Answer 1

这是您可以使用的最小组件：

// 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"}}

Answer 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
        });
    }
});