Javascript Backbonejs保存文件和表单数据

我有一个上传图像的形式和形式的数据。表单数据存储在模型中

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

我正在设置模型属性以及如何在属性中包含文件数据。 我找到了这个链接。我无法把它和我的身体联系起来

<form enctype="multipart/form-data">
  <input type="file" name="ImageData">
  <input type="text" name="UserName">
</form>

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();

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

如果我错了，请告诉我。现在在我提交之后，我得到的错误是“'append'调用了一个不实现接口FormData的对象。”

我应该在这里设置什么名称，头像文件名和头像数据？

---

我需要提交带有fild id的表单数据文件作为ImageData

我遇到了与您类似的问题。你可以从上面看到我解决问题的方法

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

---

我过去做过一件事：将文件编码为base64，然后在服务器上解码。它适用于小文件/图像，但不适用于大文件/图像。您好，我无法更改服务器功能。我必须以规定的格式发送表单数据。

$.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;
};