余烬与 jquery 文件上传

Ember with jquery file upload

本文关键字：文件 jquery 余烬      更新时间：2023-09-26

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

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

在这里，我在jsbin中包含非功能性代码，其中包括我的模板和应用程序.js代码

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

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

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

这是我在应用程序中使用的上传按钮： 它建立了一个输入按钮，并在更改时自动上传。

{{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
        });
    }
});
相关文章：