Question

我正在努力尝试将两个文件上传到php脚本，让页面下载新的合并文件而不重定向到第二页。

我不想在服务器上缓存任何文件，因为它们可能是大型（2MB）二进制文件。

看着这个问题：

似乎jQuery文件上传插件无法处理上传。有一个发布文本的示例。但是，当数据被序列化时，文件上传似乎不会通过。

$(document).on("submit", "form.fileDownloadForm", function (e) {
    $.fileDownload($(this).prop('action'), {
        preparingMessageHtml: "We are preparing your report, please wait...",
        failMessageHtml: "There was a problem generating your report, please try again.",
        httpMethod: "POST",
        data: $(this).serialize()
    });
    e.preventDefault(); //otherwise a normal form submit would occur
});

Answer 1

您可以将这两个文件添加到formData对象，使用ajax上传并返回文件

像

这样的东西

<form class="fileDownloadForm" method="POST"> 
    <input type="file" name="file1">
    <input type="file" name="file2"> 
    <input type="submit>
</form>

然后

$(document).on("submit", "form.fileDownloadForm", function (e) {
    e.preventDefault();

    $.ajax({
      url         : $(this).prop('action'),
      type        : "POST",
      data        : new FormData(this), // both inputs or "multiple" etc in same form
      processData : false,       // tell jQuery not to process the data
      contentType : false        // tell jQuery not to set contentType
    }).done(function( data ) {
      // return concatted file here as data from the server
    });
}

并将其退回

<?php    

    echo file_get_contents($_FILES['file1']) . file_get_contents($_FILES['file2']);

?>

Answer 2

您可以使用FormData()实例在$.post()事件change时使用<input type="file">将文件发布到服务器，.then()将合并文件下载到用户

var fd = new FormData();
var n = 0;
for (let file of e.target.files) {
  fd.append("files[" + n++ +"]", file);
}
$.post("/path/to/server", {files:fd})
.then(function(data) {
  // offer download of `data` here
})

上传两个文件，处理它们并下载一个没有重定向的新文件

2 个答案: