Javascript 使用iron ajax（谷歌聚合物）上传文件

我需要支持如何上传一个新的图像文件使用聚合物和JavaSpring。。。 我创建了一个包含两个字段的html表单：一个文件输入和一个简单的文本字段。我想使用Google Polymer中的web组件iron ajax在我的ajax调用中添加这些值。。。 事实上，我创建了一个代码片段，但我无法发送我的文件…它似乎是空值，我无法理解我做错了什么

这是我的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>

最后，这是我的Spring控制器：

@RequestMapping(value="/updateInfoProfile", method = RequestMethod.POST)
public @ResponseBody ReturnCode updateInfoProfile(@ModelAttribute("userInfo") UserInfoForm form, BindingResult result, HttpServletRequest request)
{
    //...
}

当我选择我的文件并调用javascript方法时，html页面中的“imageProfile”值似乎未定义

我怎样才能解决这个问题？我做错了什么

---

谢谢

在服务器端，我使用的是php，但我希望我能帮助您解决这个问题的客户端

iron ajax

还不支持

enctype=“multipart/form data”

，但您可以使用javascript的

FormData（）来处理它。您可以创建一个函数，将文件转换为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;
},
.......

然后你可以像这样从预提交函数调用它

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;
},

form.request.contentType=未定义阻止将内容类型设置为json

我知道你不使用php，但是为了获得完整的想法，你必须在php文件中获得这样的数据

if (isset($_FILES['file']['name'][0])) {

$file = $_FILES['file']['name'][0];
    $type = $_FILES['file']['type'][0];
// here yor upload methods

}

$\u文件['file']['name'][0]
之所以如此，是因为它们可以处理图像数组

我希望这能帮助你，对不起我糟糕的英语
看看这个：嗨，卡洛斯！很抱歉耽搁了……非常感谢您的回答，但我有一个问题：在方法“formPreSubmit”中，“Form”是什么元素？你是指表单id还是iron ajax id？在本例中，我在引擎盖下使用了
iron ajax
，因此事件
iron form presubmit
和名为
formPreSubmit
的处理方法继承到
iron form
componentPolymer 2没有
iron form
。你在2.0中成功地解决了这个问题吗？对不起，我不再使用聚合物了。
if (isset($_FILES['file']['name'][0])) {

$file = $_FILES['file']['name'][0];
    $type = $_FILES['file']['type'][0];
// here yor upload methods

}