Backbonejs保存文件和表单数据 [英] Backbonejs save files and form data
问题描述
我有一个表格和表格数据的上传图片。形式的数据存储在模型
如何表单数据与文件中的数据结合起来，保存模型
我设置的模型的属性，以及如何包括在属性文件中的数据。
我发现这个链接<一个href=\"http://stackoverflow.com/questions/17535469/forcing-backbone-to-save-an-attribute-as-a-file\">Forcing主干保存一个属性作为文件。我不能将它与我的形式
＆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（）;
在查看表单提交后，我序列化表单数据和读取文件。
FORMDATA坐落在属性数据和的ImageData文件之前提交
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
我可以节省一些领域FORMDATA等作为属性？
请让我知道如果我错了。现在，当我提出，我得到的错误是所谓的对象不实现接口FORMDATA上'追加'。
我应该设置什么名字这里avatar_file_name和avatar_data？
我需要与FILD ID提交表单数据文件的ImageData
我有像你这样的问题。你可以在上面看到我解决问题的方法。
变量$形式= $（myFormSelector）;// ==＆GT;领型从形式
VAR模型=新MyBackboneModel（）;
VAR MYDATA的= NULL;
变种ajaxOptions = {};
//检查它是否是一个多请求。
如果（$ form.hasFile（））{
MYDATA的=新FORMDATA（$形式[0]）;
ajaxOptions = {
键入：POST，
数据：myData的，
过程数据：假的，
缓存：假的，
的contentType：假的
};
}其他{
MYDATA的= $ form.serializeObject（）;
}//保存模型。
model.save（MYDATA的，$ .extend（{}，ajaxOptions，{
成功：函数（模型，数据，响应）{
// ==＆GT; INSERT成功
}，
错误：功能（模型，响应）{
// ==＆GT;插入错误
}
}））;
该hasFile是一个扩展jQuery函数的自定义方法。
$。fn.hasFile =功能（）{
如果（$ .TYPE（本）===未定义）
返回false; VAR hasFile = FALSE;
$。每个（$（本）.find（：文件），功能（键，输入）{
如果（$（输入）.VAL（）长度大于0）{
hasFile = TRUE;
}
}）; 返回hasFile;
};
I have a upload image in a form and the form data. The form data is stored in model
How to combine the form data with the file data and save the model
I am setting the model attributes and how to include the file data in the attributes. I found this link Forcing 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>
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();
In View after form is submitted I am serializing the form data and the reading the file. Formdata is set in attribute data and the file in Imagedata before submit
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
Can I save some fields as formdata and other as attributes?
Please let me know If I am wrong. Now after I submit I get error as "'append' called on an object that does not implement interface FormData."
What name should I set here avatar_file_name and avatar_data? I need to submit the form data file with fild id as ImageData
I had an issue like yours. You can see above the way i solve it.
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
}
}));
The hasFile is a custom method that extends the JQuery functions.
$.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保存文件和表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
