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

港控/mmm° 2023-10-01 17:09 1阅读 0赞

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

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

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

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

[下载代码][Link 2]

--------------------

### 内容 ###

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

--------------------

### 1. HTML ###

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

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

**完成的代码**

--------------------

### 2.PHP \_ ###

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

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

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

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

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

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

返回`$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.输出 ###

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

--------------------

### 5.结论 ###

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

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

[Link 1]: https://makitweb.com/how-to-upload-file-with-javascript-and-php/
[Link 2]: https://makitweb.com/demo/fileupload_javascript/how-to-upload-multiple-files-with-javascript-and-php.zip
[HTML]: https://makitweb.com/how-to-upload-multiple-files-with-javascript-and-php/#html
[PHP]: https://makitweb.com/how-to-upload-multiple-files-with-javascript-and-php/#php
[JavaScript]: https://makitweb.com/how-to-upload-multiple-files-with-javascript-and-php/#javascript
[Link 3]: https://makitweb.com/how-to-upload-multiple-files-with-javascript-and-php/#output
[Link 4]: https://makitweb.com/how-to-upload-multiple-files-with-javascript-and-php/#conclusion
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c8067f506df54c3b9d0003daa95df2a4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16
[Link 5]: https://makitweb.com/how-to-upload-multiple-image-files-with-jquery-ajax-and-php/