试图通过AJAX发送输入文件数据,无法访问控制器中的数据

Question

我正在使用Laravel 3,我在用户评论中使用AJAXing.我们正在为此评论添加图像,我似乎无法获取文件数据.当我将processData设置为false时,我也无法访问其他数据,例如评论和隐私.任何见解？

var commentforms = $('form.compose');
commentforms.on('submit', function(e){
  e.preventDefault();

  var file = document.getElementById('file_input').files[0];

  $.ajax({
    type: 'POST',
    url: '/issue/comment/' + issue_id,
    processData: false,
    data: {
      side: side,
      comment: comment,
      privacy: privacy,
      file: file,
    },
    success: function(response){
      console.log(response);
      new_comment = comment_template(response);
      updateSide(new_comment);
    },
});

Answer 1

关于Kevin B评论的内容,有几种方法可以做到这一点.

首先,它不起作用的原因是,默认情况下,您无法发送带有AJAX请求的文件.就是这样,这就是为什么它不起作用.无论你对表单和AJAX请求做了什么,你都会陷入困境.(这里的AJAX意味着不是 XMLHttpRequest2)

解决方案1

Kevin B推荐了Javascript formData对象,它是XMLHttpRequest Level 2的一部分.可以找到有关如何使用它的信息:https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects 与您的相关代码,你的代码做了以下几点:

commentforms.on('submit', function(e){
  e.preventDefault();

  var oData = new FormData(document.forms.namedItem("composeForm"));

  var oReq = new XMLHttpRequest();
  oReq.open("POST", '/issue/comment/' + issue_id, true); 
  //on a side note, issue_id isn't declared anywhere...
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      console.log("Uploaded!");
    } else {
      console.log("Error " + oReq.status + " occurred uploading your file.");
    }
  };
  oReq.send(oData);
});

问题

再一次,正如Kevin B所说,它并没有得到广泛的支持.在此处查看:http://caniuse.com/xhr2您可以看到不支持IE9及更低版本,即XP,Vista和未升级的Windows 7.如果您的应用程序位于您自己的受控网络上,您可以确保每个人都使用Firefox/Chrome/IE10 +,你很高兴.如果您要与公众一起使用此功能,那么您需要另一种解决方案.

其他解决方案

许多网站目前使用AJAX上传文件,或诱骗你认为它是AJAX.其他网站做的是两件事之一:隐藏的iFrame或Flash.

隐藏的iFrame技巧是创建一个填充当前表单数据的iframe,然后像往常一样将其发送出去,这意味着页面重新加载.因为它在iFrame中并且是隐藏的,所以用户永远不会看到页面重新加载,并且内容会像您期望的那样上传.

Flash技巧是使用一个小的Flash应用程序/插件找到该文件,然后将其发送到您的服务器.它相当容易使用,并且由于Flash得到广泛支持,它可以在大多数浏览器上实现.你只需要包含插件就可以了.

插件

我更喜欢使用插件,因为他们为我做了所有艰苦的工作.我现在喜欢的那个简单就是Fine Uploader.它易于配置,看起来很棒,可以是Bootstrapped,或者与jQuery一起使用.插件可以使用一种或两种方法上传文件,或者他们甚至可以先尝试XMLHttpRequest2,然后再回到上传文件的其他方法之一.最终,大多数流行的插件都很容易配置,并提供相当不错的文档,让它做你想要的.

其他流行的插件:

Uploadify

BlueImp

Plupload