[英]Upload file with iron-ajax (Google Polymer)
I need support how to upload a new image file using Polymer and Java Spring... I created an html form with 2 fields: one file input and a simply text field. 我需要支持如何使用Polymer和Java Spring上传新图像文件的方法。我创建了一个具有2个字段的html表单:一个文件输入和一个简单的文本字段。 I would like put these values on my ajax call using the web-components iron-ajax in Google Polymer... Actually, I createad a snippet code but I cannot send my file...it seems as null value and I can't understand what I am doing wrong... 我想使用Google Polymer中的Web组件iron-ajax将这些值放在我的ajax调用中...实际上,我创建了一个代码段代码,但无法发送文件...它似乎是空值,我无法了解我在做什么错...
This is my html form: 这是我的html形式:
<form method="post" enctype="multipart/form-data" modelAttribute="userInfo">
<paper-input type="file" id="txtFilePath" label="File path"></paper-input>
<paper-input id="firstname" name="firstname" label="Nome"></paper-input>
<paper-button id="btnSaveInfoProfile" on-tap="saveInfoProfile">Save</paper-button>
</form>
<iron-ajax id="ajaxSaveInfoProfile" method="POST" url="/updateInfoProfile" handle-as="json" on-response="responseUpdateInfoProfile" debounce-duration="0"></iron-ajax>
This is my Polymer script: 这是我的Polymer脚本:
...
saveInfoProfile: function()
{
this.$.ajaxSaveInfoProfile.params =
{
"imageProfile": this.$.imageProfile,
"firstName": this.$.firstname
};
this.$.ajaxSaveInfoProfile.generateRequest();
}
...
And finally, this is my Spring controller: 最后,这是我的Spring控制器:
@RequestMapping(value="/updateInfoProfile", method = RequestMethod.POST)
public @ResponseBody ReturnCode updateInfoProfile(@ModelAttribute("userInfo") UserInfoForm form, BindingResult result, HttpServletRequest request)
{
//...
}
the "imageProfile" value in the html page seems undefined when I select my file and invoke the javascript method... 当我选择文件并调用javascript方法时,html页面中的“ imageProfile”值似乎未定义...
How can I solve? 我该如何解决? What i am doing wrong? 我做错了什么?
Thanks! 谢谢!
In the server side i'm using php but i hope i could help you with the client side of this issue. 在服务器端,我使用的是php,但我希望我可以帮助您解决此问题。 iron-ajax
doesn't support enctype="multipart/form-data"
yet, but you can handle it with javascript's FormData();
iron-ajax
目前尚不支持enctype="multipart/form-data"
,但是您可以使用javascript的FormData();
处理它FormData();
. 。 You can create a function which convert the files to formdata and then append it to the body of iron-ajax
. 您可以创建一个函数,将文件转换为formdata,然后将其附加到iron-ajax
的主体中。
Polymer({
......
convertFileInputToFormData: function(){
regexp = /^[^[\]]+/;
var fileInput = $('input[type="file"]');
var fileInputName = regexp.exec( fileInput.attr('name') );
// make files available
var data = new FormData();
jQuery.each($(fileInput)[0].files, function(i, file) {
data.append(fileInputName+'['+i+']', file);
});
return data;
},
.......
and then you can call it from your pre-submit function like this 然后您可以像这样从预提交功能中调用它
formPreSubmit: function(event){
var form = document.getElementById('Form');
// here you convert to formData calling our function
var data = this.convertFileInputToFormData();
form.request.method = "post";
// set undefined to prevent default json content type
form.request.contentType = undefined;
// here you append your formData to the iron-ajax body
form.request.body = data;
form.request.url = "http://your.api/url"
form.request.debounceDuration = 300;
},
The form.request.contentType = undefined;
form.request.contentType = undefined;
prevent to iron-ajax
set content type as json by default. 防止iron-ajax
集内容类型缺省值为JSON。
I know your arent using php but for get the complete idea, on the php file you must get the data like that 我知道您的arent使用php,但要获得完整的主意,必须在php文件中获取类似的数据
if (isset($_FILES['file']['name'][0])) {
$file = $_FILES['file']['name'][0];
$type = $_FILES['file']['type'][0];
// here yor upload methods
}
the $_FILES['file']['name'][0]
its because they can handle an array of image. $_FILES['file']['name'][0]
是因为它们可以处理图像数组。
I hope this will help you and sorry my terrible english 希望对您有帮助,对不起我的英语不好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.