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 P>
我有像你这样的问题。你可以在上面看到我解决问题的方法。
变量$形式= $(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屋!