如何使用 JavaScript 和 PHP 上传多个文件

添加多个文件元素以上传多个文件非常耗时，您需要为此编写一些额外的代码。

您可以通过启用多个文件选择来使用单个文件元素。

读取选定的文件并附加到 FormData 对象中以传递给 AJAX 文件进行上传。

在本教程中，我将展示如何使用 JavaScript 和 PHP上传多个文件。

下载代码

---

内容

1. HTML
2. PHP
3. JavaScript
4. 输出
5. 结论

---

1. HTML

创建文件和按钮元素。要启用多个文件选择multiple，请在文件元素中添加属性。

在调用函数的按钮上添加onclick了事件。uploadFile()

完成的代码

<div >
  <input type="file" name="files" id="files" multiple>
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>

---

2.PHP _

创建一个 ajaxfile.php文件和一个 uploads文件夹来存储文件。

计算文件总数并分配给$countfiles. 将上传位置分配给$upload_location.

创建count变量以存储成功上传的文件数。

循环播放文件。读取文件名并创建文件路径。

读取文件扩展名并将有效的文件扩展名分配给$valid_extArray。

$valid_ext如果数组中存在文件扩展名，则上传文件并递增$count1。

返回$count。

完成的代码

<?php

// Count total files
$countfiles = count($_FILES['files']['name']);

// Upload directory
$upload_location = "uploads/";

$count = 0;
for($i=0;$i < $countfiles;$i++){

   // File name
   $filename = $_FILES['files']['name'][$i];

   // File path
   $path = $upload_location.$filename;

   // file extension
   $file_extension = pathinfo($path, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   // Valid file extensions
   $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");

   // Check extension
   if(in_array($file_extension,$valid_ext)){

      // Upload file
      if(move_uploaded_file($_FILES['files']['tmp_name'][$i],$path)){
        $count += 1;
      } 
   }

}

echo $count;
exit;

---

3. JavaScript

创建uploadFile()调用按钮单击的函数。

totalfiles在变量中分配所选文件的总数。如果totalfiles不大于 0 则alert("Please select a file");.

如果totalfiles > 0然后创建FormData对象并在所选文件上循环并附加到FormData对象中。

要发送 AJAX 请求，请创建一个 XMLHttpRequest. 使用 open() 方法设置请求方法 "POST" 和 AJAX 文件路径。

用方法处理 AJAX 成功回调 onreadystatechange() 。分配 this.responseText给response变量并警告response.

 用方法传递 formData 对象 。send()

完成的代码

// Upload file
function uploadFile() {

  var totalfiles = document.getElementById('files').files.length;

  if(totalfiles > 0 ){

    var formData = new FormData();

    // Read selected files
    for (var index = 0; index < totalfiles; index++) {
      formData.append("files[]", document.getElementById('files').files[index]);
    }

    var xhttp = new XMLHttpRequest();

    // Set POST method and ajax file path
    xhttp.open("POST", "ajaxfile.php", true);

    // call on request changes state
    xhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {

          var response = this.responseText;

          alert(response + " File uploaded.");

       }
    };

    // Send request with data
    xhttp.send(formData);

  }else{
    alert("Please select a file");
  }

}

---

4.输出

---

 

5.结论

循环选定的文件并将其附加到 FormData 对象以发送多个文件进行上传。

如果您发现本教程有帮助，请不要忘记分享。