javascript - 使用 AJAX 将 Zip 文件上传到服务器

Question

我有一个 php 文件，它采用 zip 文件并将其解压，然后将其放置在我的服务器上的所需路径中。

它非常适合在操作中调用 php 文件的典型表单。我正在尝试使用 AJAX 来完成这项工作，但我已经尝试了我能找到的每一段代码，但没有任何运气。

这里有我遗漏的东西吗？这当然可以做到吗？

用于上传 zip 文件的表单，

<div id="response"></div>
<form enctype="multipart/form-data" method="post" action="">
<label>Choose a zip file to upload: <input type="file" name="zip_file" id="zip_file" /></label>
<br />
<input type="submit" name="submit" value="Upload" onClick="uploadZip()" />
</form>

当前 JS - 我没有收到任何错误，页面实际上使用我当前的脚本重新加载..

<script>
function uploadZip() {
formdata = new FormData();

if (formdata) {
  $('.main-content').html('<img src="LoaderIcon.gif" />');
  $.ajax({
    url: "assets/upload-plugin.php",
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function (res){
      document.getElementById("response").innerHTML = res; 

    }
  });
}
}
</script>

php 脚本，用于处理上传 zip 并在将其放置到服务器上之前将其解压缩。

function rmdir_recursive($dir) {
    foreach(scandir($dir) as $file) {
       if ('.' === $file || '..' === $file) continue;
       if (is_dir("$dir/$file")) rmdir_recursive("$dir/$file");
       else unlink("$dir/$file");
   }

   rmdir($dir);
}

if($_FILES["zip_file"]["name"]) {
    $filename = $_FILES["zip_file"]["name"];
    $source = $_FILES["zip_file"]["tmp_name"];
    $type = $_FILES["zip_file"]["type"];

    $name = explode(".", $filename);
    $accepted_types = array('application/zip', 'application/x-zip-compressed', 'multipart/x-zip', 'application/x-compressed');
    foreach($accepted_types as $mime_type) {
        if($mime_type == $type) {
            $okay = true;
            break;
        } 
    }

    $continue = strtolower($name[1]) == 'zip' ? true : false;
    if(!$continue) {
        $message = "The file you are trying to upload is not a .zip file. Please try again.";
    }

  /* PHP current path */
  $path = '../plugins/';  // absolute path to the directory where zipper.php is in
  $filenoext = basename ($filename, '.zip');  // absolute path to the directory where zipper.php is in (lowercase)
  $filenoext = basename ($filenoext, '.ZIP');  // absolute path to the directory where zipper.php is in (when uppercase)

  $targetdir = $path . $filenoext; // target directory
  $targetzip = $path . $filename; // target zip file

  /* create directory if not exists', otherwise overwrite */
  /* target directory is same as filename without extension */

  if (is_dir($targetdir))  rmdir_recursive ( $targetdir);


  mkdir($targetdir, 0777);


  /* here it is really happening */

    if(move_uploaded_file($source, $targetzip)) {
        $zip = new ZipArchive();
        $x = $zip->open($targetzip);  // open the zip file to extract
        if ($x === true) {
            $zip->extractTo($targetdir); // place in the directory with same name  
            $zip->close();

            unlink($targetzip);
        }
        $message = "Your .zip file was uploaded and unpacked.";
    } else {    
        $message = "There was a problem with the upload. Please try again.";
    }
}

只要我使用表单操作来执行此操作，这个 php 函数就可以很好地工作。所以我确信我的问题存在于AJAX功能中。

感谢您提供的任何帮助。

Answer 1

formdata = new FormData();

您已经创建了一个 FormData 对象，但从未向其中放入任何数据。

最简单的方法是指定形式:

formdata = new FormData(document.forms[0]);

您还需要阻止提交按钮实际提交表单，以便 JS 可以执行某些操作。

<小时/>

更简洁的方法是:

1. 停止使用内在事件属性
2. 使用表单的提交处理程序
3. 从事件中获取表格

<input type="submit" name="submit" value="Upload" onClick="uploadZip()" />

变成:

<input type="submit" name="submit" value="Upload">

function uploadZip() {
      formdata = new FormData();

变成:

function uploadZip(event) {
    var formdata = new FormData(this);
    // Rest of function
    event.preventDefault();
}

然后您添加:

jQuery("form").on("submit", uploadZip);