Signup/Sign In

Single and Multiple File Uploading Script in PHP

Posted in Programming   LAST UPDATED: AUGUST 19, 2021

    Hello Geeks, In this tutorial we are going to have a brief look at how to upload a file in PHP. This tutorial is very easy to understand, and also one should have good basic knowledge in HTML, CSS, and PHP.

    FILE UPLOADING IN PHP


    Let's first see how a file uploading work.

    Process Of File Uploading:

    1. At first, the user opens the HTML file in the browser and a file uploading form will be displayed.

    2. User clicks on the browse button and selects the file/files he wants to upload.

    3. After selecting the file, he clicks on the upload button

    4. Now, the file will be uploaded to the temporary directory first.

    5. The PHP script that is specified in the form's action attribute is executed and checks if the file has arrived or not.

    6. If the file has arrived then it shifts the file to the required directory and shows a success message.


    FILE UPLOADING IN PHP

    PHP allows uploading single file or Multiples files using just a few lines of code. There are only a few minute changes in the single-upload script and multiple upload scripts.

    What kind of Files we can upload?

    We can upload files like images, videos, ZIP files, Microsoft Office documents, PDFs, as well as executables files and a wide range of other file types.

    In PHP, we have full control over the file that is being uploaded. we can authenticate the file and decide whether to accept or reject.

    Example: Accepting files less than 5Mb.


    Explanation of few things which you might not understand:

    enctype='multipart/formdata' -- Your HTML must contain this attribute. If not file will not be uploaded.

    action="single-upload.php" -- This is the script that will be executed when the user clicks on the upload button.

    method='POST' -- File will be sent using POST method.

    accept="all" -- Accepts all the file formats. If you want to allow only .jpg and .png then change all to .jpg, .png

    $_FILES This global contains all the information of the file. Using this $_FILES global, we can fetch file name, file type, file size, temp file name and errors connected with the file.

    $_FILES['input-file']['name'] -- returns file name.

    $_FILES['input-file']['type'] -- returns MIME type of the file.

    $_FILES['input-file']['size'] -- returns the size of the file(in bytes).

    $_FILES['input-file']['tmp_name'] -- returns the temporary filename of the file which was stored on the server.

    $_FILES['input-file']['error'] -- returns error code of the file. Ex: it will be 0, if there is no error.

    move_uploaded_file(FILE_TMP, NEW_DESTINATION) -- moves the file from the temporary location to the new destination using a POST request.


    * Create a FOLDER where you want to store the uploaded images.

    Now, copy that path and replace in single-upload.php(-->$path='YOUR PATH')

    SINGLE FILE UPLOADING IN PHP

    File Name: single-upload.html

    <!DOCTYPE html>
    <html>
    <head>
    	<title>SINGLE FILE UPLOADING IN PHP</title>
    	<style type="text/css">
    		body{ margin: 0; padding: 0; }
    		form{
    			position: absolute; 
    			top: 0; bottom: 0; right: 0; left: 0;
    			margin: auto;
    			width: 500px; height: 100px; text-align: center;
    			box-sizing: border-box;
    
    		}
    		form input{
    			display: block;
    			width: 100%;
    			overflow: hidden;
    			box-sizing: border-box;
    			border: none;
    			outline: none;
    			background: #FAFAFA;
    			border: 2px solid #eee;
    			font-family: sans-serif;
    			letter-spacing: 1px;
    			font-size: 15px;
    			height: 45px;
    			margin-bottom: 2% !important;
    			text-indent: 8px;
    			border-radius: 2px;
    		}
    		form button{
    			width: 100%; padding: 13px; border: none;
    			background: #2c3e50; color: white;text-transform-box: uppercase;
    			letter-spacing: 1px; border-radius: 2px;
    		}
    		form .file-upload{
    			width: 100%; height: 45px; line-height: 45px; 
    			border: 2px solid #eee; background: #FAFAFA; 
    			text-align: center; margin-bottom: 2% !important;
    			font-family: sans-serif; text-transform: uppercase;
    			font-size: 14px; font-weight: bold; letter-spacing: 1px;
    			cursor: pointer;
    		}
    	</style>
    </head>
    <body>
    
    	<form action="single-upload.php" enctype="multipart/form-data" method="POST">
    		<div class="file-upload" id="file-upload" onclick="document.getElementById('input-file').click();" >
    		    <i class="far fa-file-excel"></i> Select CSV (Click Here)
    		</div>
    	    <input type="file" style="display: none;" name="input-file" accept="all" onchange="select_file_name('input-file');" />
    		<button type="submit" name="single-upload" >SINGLE FILE UPLOAD</button>
    
    	</form>
    
    </body>
    </html>
    
    <script type="text/javascript">
    
    	function _(id){
    		return document.getElementById(id);
    	}
    
    	function select_file_name(id) {
    	    var filename = _(id).files[0].name;
    	    if (filename.length > 20) {
    	        filename = filename.substring(0, 20) + '...'
    	    };
    	    _('file-upload').innerHTML = '-> ' + filename;
    	    _('file-upload').style.backgroundColor = '#1dd1a1'
    	}
    
    </script>

    File Name: single-upload.php

    <?php
    
    if( empty($_FILES['input-file']['name']){
    	// checking if the file is selected or not
    	
    	$file_name = $_FILES['input-file']['name'];
    	$file_tmp = $_FILES['input-file']['tmp_name'];
    	$file_size = $_FILES['input-file']['size'];
    	$file_error = $_FILES['input-file']['error'];
    	$file_type = $_FILES['input-file']['type'];
    	$file_ext = explode('.', $file_name);
    	$file_act_ext = strtolower(end($file_ext));
    	$allowed = ['jpg'];
    	$path = 'C:/images/';
    
    	if( !in_array($file_act_ext, $allowed) )
    		return 'Only .jpg Files Are Allowed!';
    
    	if( $file_error != 0 )
    		return 'Image Size Should Be Be Than 2mb.';
    
    	if( $file_size > 2000000 )
    		return 'Image Size Should Be Be Than 2mb.';
    
    	$new_file_name = $name . $file_act_ext;
    	$file_des = $path .'/'. $new_file_name;
    
    	$move = move_uploaded_file($file_tmp, $file_des);
    
    	if(!$move){
    	 	return "Sorry Failed To Upload Image!" ; 
    	}else{ 
    		$image_name = [$new_file_name];
    		return $image_name; 
    	}
    }
    	
    ?>


    MULTIPLE FILE UPLOADING IN PHP

    Name: multiple-upload.html

    Copy all the HTML code that is in the single-upload.html

    Search for the line:

    <input type="file" style="display: none;" id="input-file" accept="all" onchange="select_file_name('input-file');" />

    Remove it and add below line

    <input type="file" style="display: none;" id="input-file[]" accept="all" onchange="select_file_name('input-file');" />

    Name: multiple-upload.php

    <?php
    
    $count = count($_FILES['input-file']['name']);
    
    for($i=0; $i<$count; $i++){
    	
    	$file_name = $_FILES['input-file']['name'][$i];
    	$file_tmp = $_FILES['input-file']['tmp_name'][$i];
    	$file_size = $_FILES['input-file']['size'][$i];
    	$file_error = $_FILES['input-file']['error'][$i];
    	$file_type = $_FILES['input-file']['type'][$i];
    	$file_ext = explode('.', $file_name);
    	$file_act_ext = strtolower(end($file_ext));
    	$allowed = ['jpg'];
    	$path = 'C:/images/';
    
    	if( !in_array($file_act_ext, $allowed) )
    		return 'Only .jpg Files Are Allowed!';
    
    	if( $file_error != 0 )
    		return 'Image Size Should Be Be Than 2mb.';
    
    	if( $file_size > 2000000 )
    		return 'Image Size Should Be Be Than 2mb.';
    
    	$new_file_name = $name . $file_act_ext;
    	$file_des = $path .'/'. $new_file_name;
    
    	$move = move_uploaded_file($file_tmp, $file_des);
    
    	if(!$move){
    	 	return "Sorry Failed To Upload Image!" ; 
    	}
    }
    
    ?>


    Conclusion

    Pheww! This is a brief explanation on how to upload a file in PHP. I hope that you enjoyed the post and learned about the types of methods in python. If you feel that this post is useful, please share it with your friends and colleagues.

    Thanks for reading it till the end.

    You may also like:

    About the author:
    I am a self-taught Blogger and Programmer. I have good sort of knowledge in Technology, PHP, Javascript, HTML, CSS and Python.
    Tags:PHPFile Uploading
    IF YOU LIKE IT, THEN SHARE IT
     

    RELATED POSTS