Javascript 带有jquery文件上传的余烬

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

我不能让它工作，但相同的代码可以使用php后端的纯html文件

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

---

我在应用程序中使用了一个上载按钮：它构建了一个输入按钮，并在更改时自动上载

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

---

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

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

---

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

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

//index.html
/脚本>
//components/file-upload.js
导出默认的Ember.TextField.extend({
AttributeBinding:['name'、'data url'、'multiple']，
标记名：“输入”，
键入：“文件”，
名称：“文件[]”，
“数据url”：函数（）{
返回这个。获取（“路径”）；
}.property（“路径”），
多重：对，
didInsertElement:函数（）{
这是。$（）.fileupload（）；
}
});
//在hbs模板中使用
{{file upload path=“pathToUploadTo”}

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

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

//index.html
/脚本>
//components/file-upload.js
导出默认的Ember.TextField.extend({
AttributeBinding:['name'、'data url'、'multiple']，
标记名：“输入”，
键入：“文件”，
名称：“文件[]”，
“数据url”：函数（）{
返回这个。获取（“路径”）；
}.property（“路径”），
多重：对，
didInsertElement:函数（）{
这是。$（）.fileupload（）；
}
});
//在hbs模板中使用
{{file upload path=“pathToUploadTo”}

代码的哪一部分不起作用？这是完全可以做到的。当我选择图像并点击upload nothing（上传）时，控制台上没有发生任何错误nothing（无）。。我很难把这件事弄清楚代码的哪一部分不起作用？这是完全可以做到的。当我选择图像并点击upload nothing（上传）时，控制台上没有发生任何错误nothing（无）。。我很难弄清楚这件事。它说textSpan没有定义，textSpan的功能是什么。这只是文本span，我正在更改span的文本，请随意删除它，我在上面做了。上传前和上传后都是css，你可以完全删除它们，它们是不相关的。非常感谢。。我现在正在处理其上载的php部分。您能告诉我如何将文件输入的值传递给控制器的变量吗？？我想它现在被称为“文件”。。我怎样才能从控制器中获取与此类似的值。get（'file'）它说textSpan未定义，textSpan的功能是什么只是文本span，我正在更改span的文本，请随意删除它，我在上面做了。上传前和上传后都只是css，你可以完全删除它们，它们是不相关的。非常感谢。。我现在正在处理其上载的php部分。您能告诉我如何将文件输入的值传递给控制器的变量吗？？我想它现在被称为“文件”。。我如何才能从控制器获取与此相同或类似的值。get（'file'））