Загрузка Zip-файла на сервер с AJAX

Question

У меня есть файл php, который берет zip-файл и распаковывает его, а затем помещает его по желаемому пути на моем сервере.

Он отлично работает с типичной формой, которая вызывает файл php в действии. Я пытаюсь сделать эту работу с AJAX, но я пробовал каждый фрагмент кода, который я могу найти без всякой удачи.

Есть что-то здесь, мне не хватает? Неужели это можно сделать?

Формы для загрузки файла почтового индекса,

<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 скрипт, который обрабатывает загрузки молнии и разархивировать его, прежде чем размещать его на сервере.

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. Stop с использованием атрибутов внутренних событий
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);