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

问题

再次，正如凯文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

Answer 2

请阅读：

使用 XHR2 ，支持通过AJAX上传文件。例如。通过 FormData对象，但不幸的是，所有/旧的都不支持浏览器。

试试这个：

Tutorial

并查看此代码：

var data= new FormData();
data.append( 'file', $('#file') );
$.ajax({
  url: 'file.php',
  data: data,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(response){
    console.log(response);
  }
});

Suerte！

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

2 个答案: