AJAX图像上传与backbone.js node.js和express
所以我一直在网上search一天,试图find一个完整的例子,如何上传图像以及来自骨干模型的正常POST(创build)请求。 所以经过一些初步的挖掘,我发现了HTML5中的FileReader api – 经过一些testing,我通过创build一个XMLHttpRequest()
我现在试图解决的问题是我怎么能让bacbone发送文件数据以及POST请求,就像你在正常的多部分工作stream程中遇到的一样。 林相当新,所以请原谅任何明显的错误。 inheritance人我到目前为止。
模型
define( [ 'backbone' ], function (Backbone) { var Mock = Backbone.Model.extend({ url: '/api/v1/mocks', idAttribute: '_id', readFile: function(file){ var reader = new FileReader(); self = this; reader.onload = (function(mockFile){ return function(e){ self.set({filename: mockFile.name, data: e.target.result}); }; })(file); reader.readAsDataURL(file); } }); return Mock; }
);
视图
define( [ 'jquery', 'backbone', 'underscore', 'text!../templates/create_mock-template.html', 'models/mock', 'collections/mocks' ], function ($, Backbone, _, createMockTemplate, Mock, mocksCollection) { var CreateMockView = Backbone.View.extend({ template: _.template(createMockTemplate), events: { 'submit form': 'onFormSubmit', 'click #upload-link': 'process', 'change #upload': 'displayUploads' }, initialize: function () { this.render(); return this; }, render: function () { this.$el.html(this.template); }, process: function(e){ var input = $('#upload'); if(input){ input.click(); } e.preventDefault(); }, displayUploads: function(e){ // Once a user selects some files the 'change' event is triggered (and this listener function is executed) // We can access selected files via 'this.files' property object. var formdata = new FormData(); var img, reader, file; var self = this; for (var i = 0, len = e.target.files.length; i < len; i++) { file = e.target.files[i]; if (!!file.type.match(/image.*/)) { if (window.FileReader) { reader = new FileReader(); reader.onloadend = function (e) { self.createImage(e.target.result, e); }; self.file = file; reader.readAsDataURL(file); } } } }, createImage: function(source, fileobj) { var image = '<img src="'+source+'" class="thumbnail" width="200" height="200" />' this.$el.append(image); }, onFormSubmit: function (e) { e.preventDefault(); // loop through form elements var fields = $(e.target).find('input[type=text], textarea'); var data = {}; // add names and vlaues to data object $(fields).each(function(i, f) { data[$(f).attr('name')] = $(f).attr('value'); }); // create new model from data var mock = new Mock(data); // this should set the filename and data attributes on the model??? mock.readFile(this.file); // save to the server mock.save(null, { wait: true, error: function(model, response) { console.log(model) }, success: function(model, response) { mocksCollection.add(model); console.log(model, response); } }); }, }); return CreateMockView; }
);
我完全赞赏这可能是一点点摇摆不定,它比其他任何概念的certificate,也是学习骨干的好机会。 所以我的问题的关键是这个
- 当请求被骨干发送到api为什么我看不到数据和文件名attrs在请求的节点/ express服务器
- 是什么即时尝试做甚至可能的,我基本上以为我能读取数据attr和服务器上创build和映像?
- 有没有一种方法可能覆盖Mock模型的同步方法,并创build一个正确的请求,其中正确设置POST和FILES。
林肯定这是可能的,但我似乎无法find一点信息,我需要犁,并得到这个工作。
希望有人能帮助!
干杯
编辑
只是想提供更多的信息,因为我的理解和一些简短的聊天文件云irc频道这应该工作。 所以当我打电话
mock.readFile(this.file)
文件名和数据属性似乎不被设置。 事实上,这里的一个控制台日志似乎甚至火灾,所以即时猜测这可能是问题。 我会很高兴这种方法基本上build立在节点端的图像基于数据和文件名的值。 那么,为什么这些属性被设置并传递给api的提交请求呢?
我已经解决了这种分两步创build模型的情况:
- 基本信息
- 资产
例如,如果我的模型是电影 ,我会展示一个只包含标题和简介的创build表单 。 这些信息被发送到服务器并创build模型。 在下一步中,我可以显示更新表单 ,现在更容易使用file upload插件,如:
- jQueryfile upload非常专业和稳定
- BBAssetsUpload非常beta,但基于Backbone,你可以说你认识程序员; P
您还可以检查他们的源代码以获取参考信息,以尝试使用文件创build解决scheme实现一步式Backbone Model 。
jquery-file-upload-middleware for express可能是值得一提的。