How Do You Upload Two Files at Once?

Are you lot trying to upload multiple files at once ? Here's how to implement multiple files upload using HTML and PHP.

In this article, I am going to show how to use a single HTML file input to upload multiple files. In addition to that, I will demonstrate using multiple file inputs with boosted input fields.

Implementing multiple files upload

Firstly, you need to create a HTML class with attribute enctype='multiple/form-data'. In fact, the enctype attribute specifies how the class-data should be encoded when submitting it to the server. When yous are using forms that accept a file upload control, yous need to specify enctype as multiple/course-data.

If y'all are using single file input, you need to enable your file chemical element to select multiple files. In guild to practice this, you demand to name your file input equally an array, eg. name="files[]" . Also, File Input element must have multiple="multiple" or just multiple.

The HTML form volition look like as follows:

<form action="" method="post" enctype="multipart/form-data">   <label> Select Files: </label>   <input type="file" name="fileUpload[]" multiple >    <input type="submit" name="Submit" value="Upload" > </course>        

When user submits the form after selecting files, we tin can process the form using unproblematic PHP snippets as follows:

<?php  // Set Upload Path $target_dir = 'files/';  if( isset($_FILES['fileUpload']['name'])) {          $total_files = count($_FILES['fileUpload']['name']);      for($central = 0; $primal < $total_files; $key++) {          // Check if file is selected     if(isset($_FILES['fileUpload']['name'][$fundamental])                        && $_FILES['fileUpload']['size'][$central] > 0) {              $original_filename = $_FILES['fileUpload']['name'][$fundamental];       $target = $target_dir . basename($original_filename);       $tmp  = $_FILES['fileUpload']['tmp_name'][$key];       move_uploaded_file($tmp, $target);     }        }       }  ?>        

Validating file type and file size

You lot can restrict file blazon by checking extension of the uploaded file with gear up of allowed extensions. The following lawmaking checks for valid image file.

// Get the extension $ext = strtolower(pathinfo($_FILES["fileUpload"]["name"][$key], PATHINFO_EXTENSION));          // check extension and upload if( in_array( $ext, array('jpg', 'jpeg', 'png', 'gif', 'bmp'))) {   // Filetype if valid, process uploading }

In order to bank check the file size, you can employ $_FILES['paradigm']['size'] equally follows:

$maxFileSize = five * 1024 * 1024; //5MB $errors = array();  if($_FILES['fileUpload']['size'][$key] > $maxFileSize){   $errors[$cardinal] = 'File size is greater than allowed size'; }        

Furthermore, you lot can besides rename filename before uploading. Here'due south how to supervene upon spaces within filename with underscore and add timestamp to the filename.

if(isset($_FILES['fileUpload']['name'][$key])                    && $_FILES['fileUpload']['size'][$key] > 0) {         $original_filename = $_FILES['fileUpload']['name'][$key];          // Go the fileextension   $ext = pathinfo($original_filename, PATHINFO_EXTENSION);          // Get filename without extesion   $filename_without_ext = basename($original_filename, '.'.$ext);   // Generate new filename   $new_filename = str_replace(' ', '_', $filename_without_ext) . '_' . time() . '.' . $ext;    // Upload the file with new name   move_uploaded_file($_FILES['fileUpload']['tmp_name'][$key], $target_dir . $new_filename); }        

Uploading multiple files with additional data

Sometimes it is required to upload multiple files with additional information similar title, description, etc. In such cases, y'all accept to utilise several file input controls.

In the in a higher place screenshot, each file input has respective title. Here's the sample HTML.

<form activeness="" method="post" enctype="multipart/form-data">       <input type="text" name="title[]" placeholder="Championship" >   <input type="file" proper name="fileUpload[]" >       <input type="text" proper name="championship[]" placeholder="Title" >   <input type="file" proper noun="fileUpload[]" >       <input type="text" name="title[]" placeholder="Championship" >   <input type="file" name="fileUpload[]" >       <input type="text" name="title[]" placeholder="Title" >   <input blazon="file" name="fileUpload[]" >       <input type="submit" name="Submit" value="Upload" >     </form>        

Every bit you can see, there is multiple text input and file input controls. Past appending '[]' to your input element names, input elements will submit as arrays.

When you submit the above form, $_POST['title'] will be an assortment. Past matching the index of array $_POST['title'] with $_FILES['fileUpload']['proper name'], y'all tin can become corresponding title, filename pair. For case, $_POST['title'][0] is the championship of file $_FILES['fileUpload']['name'][0] and so on.

In this way, you tin can implement multiple file uploads using HTML and PHP.

You tin also upload multiple files using AJAX.

You may also like: Inserting multiple rows into MySQL using PHP

mccaryprodins.blogspot.com

Source: https://thedebuggers.com/multiple-files-upload-using-html-php/

Share this post