使用ember js上传文件并支持IE8的正确方法

时间:2015-03-25 13:51:22

标签: file-upload ember.js internet-explorer-8

我在将文件从ember.js前端上传到grails后端时遇到问题。由于支持IE8,我无法使用像ember-uploader这样的任何ember插件。有什么建议如何解决这个问题?

2 个答案:

答案 0 :(得分:1)

BlueImp的jQuery文件上传声称它支持IE 6+。阅读更多相关信息: https://github.com/blueimp/jQuery-File-Upload

我通过这样的Ember组件使用它:

{{file-upload uploadUrl=uploadUrl filename="files" 
    buttonText="Upload files" 
    hiddenName="fileId" hiddenValue=fileId
    uploaded="filesUploaded"}}

并在组件didInsertElement中初始化插件:

didInsertElement: function() {
    var self = this;
    this.$('#'+this.get('inputId')).fileupload({
        dataType: 'json',
        url: this.get('uploadUrl'),
        formData: function() {
            return [{name: self.get('hiddenName'), value: self.get('hiddenValue')}];
        },
        done: function(e, data) {
            self.sendAction('uploaded', data.result);
            self.markCompleted(data.result.filenames);
        },
        fail: function (e, data) {
            self.sendAction('failed', data.result);
        },
        add: function(e, data) {
            data.process().done(function () {
                data.submit();
            });
        },
    });

答案 1 :(得分:0)

感谢kielni的回复,但我使用了与你不同的方法。 我使用了这篇博文中的解决方案:Cross-browser AJAX uploads with Ember.js and mOxie

和组件中的代码对我有用:

var fileInput = new mOxie.FileInput({
            browse_button: this.$('.file-pick-button').get(0),
            multiple: false
        });

        fileInput.onchange = function (e) {
            var file = fileInput.files[0];
            var reader = new mOxie.FileReader();
            reader.onloadend = function () {
                ajax({
                    type: "POST",
                    timeout: 5000,
                    url: config.serverURL + '/files/',
                    data: {
                        transportID: id,
                        filename: file.name,
                        file: reader.result
                    }
                });
            };
            reader.readAsBinaryString(file);
        };
        fileInput.init();