Php Multifile Uploader for Php With Progress Bar
File Upload with Progress Bar, The most key feature of the dynamic web application is the file upload function. PHP can be used to easily implement the file upload functionality. Commonly, when you upload a file using PHP, the page is refreshed jQuery and Ajax can be used for uploading files or photos without refreshing the page, to make information technology piece of cake for people to upload this file.
Progress Bar is very useful in showing the upload progress in a human-readable format. A progress bar is a graphical feature that visualizes an operation's progress. A progress bar can usually be used to view progress representation for upload, download, or installation in a percent format. In this tutorial, nosotros volition bear witness you how to Upload File with Progress Bar using PHP and Ajax JQuery.
Earlier getting started, take a look at the file structure.
| file - upload - with - progress - bar - using - jquery - ajax - php / ├── index . html ├── upload . php ├── uploads / └── LoaderIcon . gif |
File Upload with Progress Bar course (index.html)
In this form, we accept file input and progress bar to show the progress of the upload file. In the starting, the progress bar width is ready to 0.
| // file upload html code < form id = "uploadForm" action = "upload.php" method = "post" > < div > < characterization > Upload File : < / label > < input name = "userFile" id = "userFile" type = "file" course = "demoInputBox" > < / div > < div > < input blazon = "submit" id = "btnSubmit" value = "Submit" grade = "btnSubmit" > < / div > < div id = "progress-div" > < div id = "progress-bar" > < / div > < / div > < / form > < div id = "loader-icon" style = "display:none;" > < img src = "LoaderIcon.gif" > < / div > |
jQuery Ajax File Upload with Progress Bar:
The jQuery and Ajax are used to upload a progress bar file, so start with the jQuery library.
The following jQuery code sends data from the selected file to the server-side script without Ajax reloading the page.
| 2 iii 4 5 6 7 eight 9 10 11 12 13 14 15 16 17 18 19 twenty 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 l 51 52 53 54 55 56 57 58 59 | <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" > </script> <script type = "text/javascript" > $ ( certificate ) . ready ( part ( ) { // File upload via Ajax $ ( "#uploadForm" ) . on ( 'submit' , office ( eastward ) { e . preventDefault ( ) ; $ . ajax ( { xhr : role ( ) { var xhr = new window . XMLHttpRequest ( ) ; xhr . upload . addEventListener ( "progress" , office ( evt ) { if ( evt . lengthComputable ) { var percentComplete = parseInt ( ( ( evt . loaded / evt . total ) * 100 ) ) ; $ ( "#progress-bar" ) . width ( percentComplete + '%' ) ; $ ( "#progress-bar" ) . html ( percentComplete + '%' ) ; } } , false ) ; return xhr ; } , type : 'POST' , url : 'upload.php' , data : new FormData ( this ) , contentType : false , cache : false , processData : imitation , beforeSend : function ( ) { $ ( "#progress-bar" ) . width ( '0%' ) ; $ ( '#loader-icon' ) . bear witness ( ) ; } , error : role ( ) { $ ( '#loader-icon' ) . html ( '<p style="color:#EA4335;">File upload failed, delight effort again.</p>' ) ; } , success : function ( resp ) { if ( resp == 'ok' ) { $ ( '#uploadForm' ) [ 0 ] . reset ( ) ; $ ( '#loader-icon' ) . html ( '<p style="color:#28A74B;">File has uploaded successfully!</p>' ) ; } else if ( resp == 'err' ) { $ ( '#loader-icon' ) . html ( '<p style="color:#EA4335;">Delight select a valid file to upload.</p>' ) ; } } } ) ; } ) ; // File type validation $ ( "#userFile" ) . change ( role ( ) { var allowedTypes = [ 'application/pdf' , 'application/msword' , 'application/vnd.ms-office' , 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' , 'image/jpeg' , 'epitome/png' , 'image/jpg' , 'image/gif' ] ; var file = this . files [ 0 ] ; var fileType = file . type ; if ( ! allowedTypes . includes ( fileType ) ) { alert ( 'Please select a valid file (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).' ) ; $ ( "#userFile" ) . val ( '' ) ; render imitation ; } } ) ; } ) ; </script> |
Upload File to "uploads" folder using PHP (upload.php)
The upload.php file is called to handle the process of uploading the file with PHP by the Ajax request.
| two three 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <?php $upload = 'err' ; if ( ! empty ( $_FILES [ 'file' ] ) ) { // File upload configuration $targetDir = "uploads/" ; $allowTypes = array ( 'pdf' , 'md' , 'docx' , 'jpg' , 'png' , 'jpeg' , 'gif' ) ; $fileName = basename ( $_FILES [ 'file' ] [ 'name' ] ) ; $targetFilePath = $targetDir . $fileName ; // Check whether file type is valid $fileType = pathinfo ( $targetFilePath , PATHINFO_EXTENSION ) ; if ( in_array ( $fileType , $allowTypes ) ) { // Upload file to the server if ( move_uploaded_file ( $_FILES [ 'file' ] [ 'tmp_name' ] , $targetFilePath ) ) { $upload = 'ok' ; } } } echo $upload ; ?> |
Too Read: jQuery to Preview and Rotate an Image Earlier Upload using PHP
Also Read: Multiple File Upload with PHP
Besides Read: Resize Image While Uploading with PHP
Are y'all looking for Website Developer in Delhi?
Are y'all desire to get implementation assist, or modify or extend the functionality of this script? Submit paid service request ORChat Using Lesser Right Facebook Chat Box
Pradeep Maurya is the Professional Web Developer and Founder of "Tutorialswebsite". He lives in Delhi and loves to exist a self dependent person. As an author, he is trying his best to meliorate this platform day by day. His passion, dedication and quick decision making ability to stand up autonomously from others. He'due south an avid blogger and writes on the publications like Dzone, e27.co
Source: https://www.tutorialswebsite.com/ajax-file-upload-with-progress-bar-using-php-and-jquery/
0 Response to "Php Multifile Uploader for Php With Progress Bar"
Post a Comment