This article describes how to use PHP to read all file names in a specified directory and pass these file names into JavaScript for use. Get the file list through functions such as opendir, readdir, etc. of PHP, then use json_encode to convert the PHP array into a JSON string, and finally parse the JSON string in JavaScript to obtain the file list.

PHP side: Get the file list

First, we need to use PHP to read all file names in the specified directory. Here is a simple example code showing how to implement this function using opendir, readdir, and closedir functions.

 <?php $files = [];
$directory = &#39;C:\xampp\\htdocs\\dump\\uploads&#39;; // Replace with your directory path if ($handle = opendir($directory)) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            $files[] = $entry;
        }
    }
    closedir($handle);
} else {
    echo "Cannot open directory";
}

// Output file list, convenient for debugging print_r($files);
?>

Code explanation:

1. $files = [];: Initialize an empty array to store file names.
2. $directory = 'C:\xampp\htdocs\dump\uploads';: Specify the directory path to read. Please modify this path according to your actual situation.
3. opendir($directory): Opens the specified directory and returns a directory handle.
4. readdir($handle): Read an entry from a directory handle, which can be a file or a subdirectory.
5. $entry != "." && $entry != "..": Filter out the current directory (.) and the parent directory (..).
6. $files[] = $entry;: Add the read file name to the $files array.
7. closedir($handle): Close the directory handle and release the resource.
8. print_r($files);: Print a file list for debugging.

Notes:

• Please make sure PHP has permission to access the specified directory.
• The directory path needs to use double backslashes (\\) or forward slashes (/).

Passing PHP array to JavaScript

Next, we need to pass the list of files obtained by PHP into JavaScript. A common method is to use the json_encode function to convert a PHP array into a JSON string and parse that string in JavaScript.

 <script type="text/javascript">
    const files = JSON.parse(<?php echo "&#39;".json_encode($files)."&#39;"; ?>);    
    console.log(&#39;myFiles&#39;, files); 
</script>

Code explanation:

1. json_encode($files): Convert PHP array $files to JSON string.
2. echo "'".json_encode($files)."'";: output JSON strings to HTML pages and wrap them in single quotes to prevent JavaScript parsing errors.
3. JSON.parse(): Use the JSON.parse() function in JavaScript to parse JSON strings and convert them into JavaScript arrays.
4. console.log('myFiles', files);: Print the file list to the console for easy debugging.

Another way:

You can also directly embed JSON data into HTML's data attributes and then read in JavaScript:

 <div id="file-list" data-files="'<?php" echo json_encode>'></div>

<script>
  const fileListElement = document.getElementById(&#39;file-list&#39;);
  const files = JSON.parse(fileListElement.dataset.files);
  console.log(&#39;Files from data attribute:&#39;, files);
</script>

This method is clearer and avoids the direct output of PHP variables in script tags.

JavaScript side: Use file list

Now, we have successfully passed the list of files obtained by PHP to JavaScript. These file names can be used in JavaScript for various operations, such as dynamically generating lists, filtering files, etc.

 // Example: Dynamically generate file list const fileListContainer = document.getElementById('file-list-container');

files.forEach(file => {
    const listItem = document.createElement('li');
    listItem.textContent = file;
    fileListContainer.appendChild(listItem);
});

Code explanation:

1. document.getElementById('file-list-container'): Gets the HTML element used to display the file list.
2. files.forEach(file => { ... });: Iterate over the file list array.
3. document.createElement('li'): Create a new li element.
4. listItem.textContent = file;: Set the text content of the li element to the file name.
5. fileListContainer.appendChild(listItem): Adds the li element to the file list container.

Summarize:

Through the above steps, we have successfully implemented the function of using PHP to obtain a list of directory files and pass these file names into JavaScript for use. This method can be applied to various scenarios where file lists need to be loaded dynamically, such as image libraries, file management systems, etc. Please note that security is crucial, and it is important to verify and filter the files uploaded by users to prevent malicious code injection.

The above is the detailed content of Output format requirements: PHP obtains the directory file list and uses it in JavaScript. For more information, please follow other related articles on the PHP Chinese website!