var Image = Backbone.Model.extend({
readFile: function(file) {
var reader = new FileReader();
// closure to capture the file information.
reader.onload = (function(theFile,that) {
return function(e) {
//set model
that.set({filename: theFile.name, data: e.target.result});
};
})(file,this);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
});
function backgroundUpload(form, container) {
$(container).append('<iframe name="targetFrame" id="targetFrame" style="display: none; height: 0px; width:0px;" ></iframe>');
$(form).attr('target', 'targetFrame');
window.backgroundUploadComplete = function() {
//clear your form:
$(form).find(':file').val('');
$(form).find(':text').val('');
//do whatever you do to reload your screenful of data (I'm in Backbone.js, so:)
window.Docs.fetch().complete( function() { populateDocs(); });
//get rid of the target iframe
$('#targetFrame').remove();
};
$(form).submit();
}
8条答案
按热度按时间lxkprmvk1#
如果您使用的是HTML5,则可以使用文件api中的readAsDataURL方法来读取它并将其存储在模型上。
这是我用来读取和存储的代码。
lnlaulya2#
您可以尝试使用jquery.iframe.transport插件。
cuxqih213#
恕我直言,你不能将一个文件序列化成JSON。如果你需要将一些数据和文件沿着发送,你可以用POST方法将它们作为查询参数发送。
06odsfpq4#
通过 AJAX 提交文件没有好的方法,所以我编写了一个函数来伪造它--它在DOM中插入一个秘密的iframe,这个iframe永远不可见,但仍然可以作为提交表单的目标,它还安装了一个函数,供您在文件上传时调用,以清理门户。
让上传表单的submit按钮触发我写的这个函数。它使用jQuery是因为它简单又好用,但原则上这并不是绝对必要的:
然后,让执行文件解析和保存的表单处理程序返回字符串:
您的表单可能类似于:
(#documents是这个表单所在的div。可能是任何DOM元素,它只需要一个home。)
ltqd579y5#
disbfnqx6#
基于Anthony的答案(https://stackoverflow.com/a/10916733/2750451),我已经用coffeescript编写了一个基于defer对象的解决方案。
然后,您可以这样使用它
为了在服务器端处理它(因为它是Base64编码),这里使用RoR中的解决方案(基于https://stackoverflow.com/a/16310953/2750451)
kmpatx3s7#
要详细说明Anthony Chua的答案,您需要将图像处理添加到
Backbone.Form.editors
,如您可以按如下方式使用上面的代码
呈现表单时使用:
bis0qfac8#
在HTML5(包括IE9)之前,无法通过 AJAX 提交文件。
您需要通过 AJAX 同步模型属性,然后发送另一个html表单post和文件,然后以某种方式同步它们。通常,通过ajax保存模型,获取一个id,将id添加到另一个表单,然后发布文件。
jQuery插件“jquery.form”可以帮助你构造一个表单来发布文件。它管理“隐藏iframe技巧”,使它看起来像 AJAX 。
你可能只需要花一些时间在谷歌上搜索“隐藏的iframe技巧”...