Backbonejs保存文件和表单数据

我在表单和表单数据中有一个上传图片。 表单数据存储在模型中

如何将表单数据与文件数据组合并保存模型

我正在设置模型属性以及如何在属性中包含文件数据。 我发现此链接强制Backbone将属性保存为文件 。 我无法将它与我的表格联系起来

   
 User = Backbone.Model.extend({ readAvatar : function (file, callback) { var reader = new FileReader(); // File API object for reading a file locally reader.onload = (function (theFile, self) { return function (e) { // Set the file data correctly on the Backbone model self.set({avatar_file_name : theFile.name, avatar_data : fileEvent.target.result}); // Handle anything else you want to do after parsing the file and setting up the model. callback(); }; })(file, this); reader.readAsDataURL(file); // Reads file into memory Base64 encoded } attribute : function(attr) { return Object.defineProperty(this.prototype, attr, { get: function() { return this.get(attr); }, set: function(value) { var attrs; attrs = {}; attrs[attr] = value; return this.set(attrs); } }); }; }); var form_data = form.serializeArray(); 

在表单提交后的View中，我正在序列化表单数据和读取文件。 在提交之前，Formdata在属性数据和Imagedata中的文件中设置

 this.model.data = form_data; var profiledata; if (window.FormData) { profiledata = new FormData(); console.log(profiledata); } if (profiledata) { jQuery.each($('#ImageData')[0].files, function(i, file) { //reader.readAsDataURL(file); profiledata.append("ImageData[]", file); }); } this.model.ImageData = profiledata; //and save the data this.model.save 

我可以将一些字段保存为formdata和其他属性吗？

如果我错了，请告诉我。 现在提交之后，我得到错误，因为“’追加’调用了一个没有实现接口FormData的对象。”

我应该在这里设置什么名称avatar_file_name和avatar_data？ 我需要提交带有fild id的表单数据文件作为ImageData

Answer 1

我遇到了像你这样的问题。 你可以看到我解决它的方式。

 var $form = $("myFormSelector"); //==> GET MODEL FROM FORM var model = new MyBackboneModel(); var myData = null; var ajaxOptions = {}; // Check if it is a multipart request. if ($form.hasFile()) { myData = new FormData($form[0]); ajaxOptions = { type: "POST", data: myData, processData: false, cache: false, contentType: false }; } else { myData = $form.serializeObject(); } // Save the model. model.save(myData, $.extend({}, ajaxOptions, { success: function(model, data, response) { //==> INSERT SUCCESS }, error: function(model, response) { //==> INSERT ERROR } })); 

hasFile是一个扩展JQuery函数的自定义方法。

 $.fn.hasFile = function() { if ($.type(this) === "undefined") return false; var hasFile = false; $.each($(this).find(":file"), function(key, input) { if ($(input).val().length > 0) { hasFile = true; } }); return hasFile; };