Question

任何正文都可以通过使用骨干js模型来保存多部分表单吗？

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

我正在设置模型属性以及如何在属性中包含文件数据。我将代码从其中一个站点改为Forc Backbone，将属性保存为文件。我无法将其与我的表格联系起来

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

查看

    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

Answer 1

我没有处理模型中的FileReader逻辑，而是在视图中管理它。

检查出来：

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

查看：

var FormView = Backbone.View.extend({
  events: {
    "submit form" : "submit",
    "change input[type=file]" : "encodeFile"
  },

  render: function () {
    var content = this.template(); 
    this.$el.html(content);
    return this;
  },

  encodeFile: function (event) {
    var file = event.currentTarget.files[0];
    var reader = new FileReader();
    reader.onload = function (fileEvent) {
      this.model.set({ 
        avatar_data: fileEvent.target.result // file name is part of the data
      });
    }.bind(this)
    reader.onerror = function () {
      console.log("error", arguments)
    }
    reader.readAsDataURL(file);
  },

  submit: function (event) {
    event.preventDefault();
    this.model.set({ UserName: $('input[name=UserName]').val() });
    this.model.save();
  }
});

多部分表单另存为backbonejs中的属性

1 个答案: