Question

我有一个php文件，它接受一个zip文件并解压缩然后将它放在我服务器上的所需路径上。

它适用于调用动作中的php文件的典型表单。我正在尝试使用AJAX进行这项工作，但我已经尝试了所有可以找到的代码而没有任何运气。

这里有什么东西我不见了吗？当然可以这样做吗？

上传zip文件的表单，

@NgModule({
    declarations: [...],
    imports: [...],
    providers: [..., TestService],
    bootstrap: [AppComponent],
}

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

<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>

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

<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函数就可以正常工作。所以我确信我的问题存在于AJAX函数中。

感谢您提供的任何帮助。

Answer 1

formdata = new FormData();

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

最简单的方法是指定表格：

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

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

更清洁的方法是：

停止使用内部事件属性
使用表单
从活动中获取表格

<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);

使用AJAX将Zip文件上载到服务器

1 个答案: