5

我正在使用 Laravel 3，并且在用户评论中使用 AJAX。我们正在向此评论添加图像，我似乎无法通过文件数据。当我将 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);
    },
});
4

2 回答 2

6

根据 Kevin B 的评论，有几种方法可以做到这一点。

首先，它不起作用的原因是，默认情况下，您无法使用 AJAX 请求发送文件。就是这样，这就是它不起作用的原因。无论您对表单和 AJAX 请求做什么，都会陷入困境。（这里的 AJAX 表示不是XMLHttpRequest2）

解决方案 1

Kevin B 推荐了 JavascriptformData对象，它是 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。它易于配置，看起来很棒，可以引导或与 jQuery 一起使用。插件可以使用一种或两种方法来上传文件，或者他们甚至可以先尝试 XMLHttpRequest2，然后再使用其他方法之一来上传文件。最终，大多数流行的插件都很容易配置，并提供相当不错的文档来让它做你想做的事。

其他流行的插件：

上传

蓝色小鬼

上传

于 2013-09-25T19:48:12.477 回答
2

读这个：

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

试试这个：

  1. 教程

并查看此代码：

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

苏尔特！

于 2013-09-25T19:59:01.420 回答