使用Ajax上传文件 - FormData

Question

首先，我搜索了许多关于这个问题的主题，并且不想使用任何插件。

function addToDatabase(menuItem){
  var formData = new FormData();
  formData.append("Description", document.getElementById("DescriptionID").value);
  jQuery.each($('#filesID')[0].files, function(i, file) {
      formData.append('file-'+i, file);
  });

  $.ajax({

    type: "POST",
    url: "dbAdder.php",
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    success: function(result){
      $("#PageContent").html(result);
    }
  });
}

发送到服务器的Js函数。虽然在服务器端代码中$_POST['Description']具有值，但$_FILES['file-0']没有。

<input type="file" id="filesID" name="files[]" multiple />
<textarea id="DescriptionID" rows="5" cols="53"></textarea>

HTML代码部分。

- Crackeraki

---

没有舒适的解决方案。每个通过Ajax上传文件都需要诸如iFrames之类的黑客技巧。您对每个单独插件有什么问题？很可能在没有插件的情况下，您将遇到相同的问题。 - dotancohen

因为我不确定插件的工作原理，如果插件所有者在我将数据发送到我的服务器之前就可以访问我的数据。而且该代码只能由原始网页数据库的管理员查看。 - Crackeraki

然后去了解一下jQuery插件的工作原理，再做出是否使用它们的决定。 - dotancohen

你确定要使用 .append() 吗？如果可以简单地将 new FormData(document.getElementById('form')) 定义为要发送的数据，那就更好了。 - Yang

在你的 PHP 脚本中，应该是 $_FILES['files']，而不是 $_FILES['file-0']。 - Yang

@DaveJust 我会尝试它，即使我看不到它的逻辑。请检查这行代码 jQuery.each($('#filesID')[0].files, function(i, file) { formData.append('file-'+i, file); }); - Crackeraki

Answer 1

如果您计划上传文件，这会使一切变得有点复杂。

如果外部插件不是选项，我强烈建议使用XHR2。

它是纯JavaScript，并且可以很好地处理文件上传。

但请注意，它并不受所有浏览器支持，请参见此处：http://caniuse.com/xhr2

// prepare xhr object
var xhr = new XMLHttpRequest();

xhr.open('POST', 'dbAdder.php', true);

// upload complete handler
xhr.onload = function(e){
if (this.status == 200) {
    //
}
    else { // }
};

// upload progress handler
xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
            // e.total, e.loaded
    }
};

var fd = new FormData();
fd.append("file", file);
fd.append("Description", 'description text');
fd.append("field2", 'value2');

// send the xml http request
xhr.send(fd);

这是一个非常好的关于进一步使用xhr2的教程：http://www.html5rocks.com/en/tutorials/file/xhr2/

希望这有所帮助。

- geevee

---

我需要包含类似于<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>这样的内容吗？ - Crackeraki

是的，它可以处理multipart/form-data（就像您所说的文件和字符串）。不需要外部插件，纯JavaScript。 - geevee

在 fd.append("file", file); 中的变量 file，我需要放置图像源吗？ - Crackeraki

不，file 就是文件对象本身（直接来自 fileinput）。 - geevee

相同的结果 :( $_POST['Description'] 可以获取值，但是 $_FILES['file'] 却不能。- Crackeraki 6小时前 - Crackeraki