多部分的形式保存在backbonejs属性 [英] multipart form save as attributes in backbonejs

问题描述

任何机构可以给予例如，通过使用JS骨干模型保存多部分的形式？

如何将表单数据与文件中的数据结合起来并保存到模型

我设置的模型的属性，以及如何包括在属性文件中的数据。我适应了code从网站上FORC骨干企业之一，以保存属性为一个文件。我不能将它与我的形式

 ＆LT;表单的enctype =的multipart / form-data的＆GT;
  ＆LT;输入类型=文件名称=的ImageData＆GT;
  ＆LT;输入类型=文本名称=用户名＆GT;
＆LT; /表及GT;
 

示范

 用户= Backbone.Model.extend（{
  readAvatar：功能（文件，回调）{
    VAR读卡器=新的FileReader（）;局部读取文件//文件API对象
    reader.onload =（功能（theFile，个体经营）{
      复位功能（E）{
        //正确设置骨干模型的文件数据
        self.set（{avatar_file_name：theFile.name，avatar_data：fileEvent.target.result}）;
        //处理其他任何你想要解析文件和设置模式后做。
        回电话（）;
     };
    }）（文件，本）;
    reader.readAsDataURL（文件）; //读取文件到内存中的Base64 EN codeD
  }
    属性：功能（ATTR）{
      返回Object.defineProperty（this.prototype，ATTR {
        得到：函数（）{
          返回this.get（attr）使用;
        }，
        设置：功能（值）{
          VAR ATTRS;          的attrs = {};
          ATTRS [ATTR] =价值;
          返回this.set（ATTRS）;
        }
      }）;
    };
}）;
   变种form_data = form.serializeArray（）;
 

查看

  this.model.data = form_data;
VAR profiledata;
如果（window.FormData）{
        profiledata =新FORMDATA（）;
        的console.log（profiledata）;
}如果（profiledata）{
    jQuery.each（$（'＃的ImageData'）[0] .files，功能（我，文件）{
        //reader.readAsDataURL(file）;
        profiledata.append（的ImageData []，文件）;    }）;
}
    this.model.ImageData = profiledata;    //并保存数据
    this.model.save
 

解决方案

而不是模型处理的FileReader 逻辑，我一直在管理，在视图。

检查了这一点：

 ＆LT;表单的enctype =的multipart / form-data的＆GT;
  ＆LT;输入类型=文件名称=的ImageData＆GT;
  ＆LT;输入类型=文本名称=用户名＆GT;
  ＆LT;按钮和GT;提交＆LT; /按钮＆GT;
＆LT; /表及GT;
 

查看：

  VAR FormView控件= Backbone.View.extend（{
  事件：{
    提交表单：提交，
    改变输入[type = file]：恩codeFILE
  }，  渲染：功能（）{
    VAR内容= this.template（）;
    这$ el.html（内容）;
    返回此;
  }，  EN codeFILE：函数（事件）{
    var文件= event.currentTarget.files [0];
    VAR读卡器=新的FileReader（）;
    reader.onload =功能（fileEvent）{
      this.model.set（{
        avatar_data：fileEvent.target.result //文件名是数据的一部分
      }）;
    } .bind（本）
    reader.onerror =功能（）{
      的console.log（错误，论据）
    }
    reader.readAsDataURL（文件）;
  }，  提交：函数（事件）{
    。事件preventDefault（）;
    this.model.set（{用户名：$（'输入[名称=用户名]'）VAL（）}）;
    this.model.save（）;
  }
}）;
 

Can any body give example to save the multipart form by using backbone js model?

How to combine the form data with file data and save to model

I am setting the model attributes and how to include the file data in the attributes. I adapted the code from one of the site to Forc Backbone to save an attribute as a file. I could not relate it to my form

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

Model

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

    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

解决方案

Rather than handling the FileReader logic in the model, I've been managing that in the view.

Check this out:

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

View:

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属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！