使用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放到服务器上之前处理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);