Question

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

中

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

我正在设置模型属性以及如何在属性中包含文件数据。我找到了这个链接Forcing Backbone to save an attribute as a file。我无法将其与我的表格联系起来

<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在提交之前在属性数据和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，将其他字段保存为属性吗？

如果我错了，请告诉我。现在提交后，我得到错误，因为“'append'调用了一个没有实现接口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;
};

Backbonejs保存文件和表单数据

1 个答案: