PHP Classes

File Upload With AJAX: Handle file uploads and returns JSON response

Recommend this page to a friend!
  Info   View files Example   View files View files (4)   DownloadInstall with Composer Download .zip   Reputation   Support forum (1)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 56%Total: 658 This week: 1All time: 4,889 This week: 560Up
Version License PHP version Categories
ajax-file-upload 1.0Freeware5PHP 5, Files and Folders, AJAX
Collaborate with this project 

Author

fileuploadwithajax - github.com

Description

This is a simple class that can handle file uploads and returns JSON response.

It can take the $_FILES array as parameter and checks if a file with a given input name was uploaded successfully.

If the file was received, it is moved to the uploads directory.

The class creates an array with the response details and outputs the array JSON encoded so it is easier for the JavaScript to handle.

The details include a success message with a download link, and the name of the file that was stored. If the upload fails, an error message is returned.

Picture of Bharat Parmar
  Performance   Level  
Name: Bharat Parmar <contact>
Classes: 11 packages by
Country: India India
Age: 33
All time rank: 52131 in India India
Week rank: 411 Up26 in India India Up
Innovation award
Innovation award
Nominee: 3x

Recommendations

What is the best PHP AJAX file upload class?
I want to upload files using AJAX

Upload images using AJAX
Trying to upload avatar file

Example

<!DOCTYPE html>
<html>
    <head>
        <title>File Upload with AJAX : </title>
        <script src="js/jquery.min.js"></script>
    </head>
<body>

<form method="post" enctype="multipart/form-data" id="myform">
    <h3>Select File to upload</h3>
    <input type="file" name="demo_file" class="file-upload-ajax">
    <hr>
    <div class="uploaded-files"></div>
</form>
<script type="text/javascript">
    $(document).ready(function(){
          /*BEGIN FILE UPLOADING WITH CODE*/
             $('.file-upload-ajax').on('change',function(){
                  if(confirm("Are You Sure to Upload This File ?")) {
                      $(this).after('<span class="temp-message">File Uploading.....</span>');
                    var formdata = new FormData($("#myform")[0]);
                    $.ajax({
                        type: "POST",
                        url: "ajax.class.php?func=uploadfile",
                        enctype: 'multipart/form-data',
                        data: formdata,
                        async: false,
                        contentType: false,
                        processData: false,
                        cache: false,
                           success: function(msg)
                        {
                            $response = $.parseJSON(msg);
                                $('.temp-message').text($response.message);
                                $('.file-upload-ajax').val('');
                                $('.uploaded-files').append($response.response_html);
                        }
                        //success ends
                    });

                  } else {
                      $('.file-upload-ajax').val('');
                  }
             });
          /*END FILE UPLOADING WITH CODE*/
    });
</script>
</body>
</html>


Details

File Upload with AJAX

User can upload the file with AJAX. Once the file will be selected by User, the Script will confirm user to upload file or not. If user allow to upload file, it will be uploaded to the server and return the File Name and Download Link of the uploaded file.

Developed By :

Bharat Parmar

Version :

1.0

File Structure :

1) example.php : Example Script file 2) ajax.class.php : This file will upload the selected file to the "upload" directory. 3) upload : This directory will store uploaded files. 4) jquery.min.js : JQuery File for the AJAX and Javascript functions.

Requirements :

1) PHP Version : 3.0 and above


  Files folder image Files  
File Role Description
Files folder imagejs (1 file)
Plain text file ajax.class.php Class Class file which includes file upload function
Accessible without login Plain text file example.php Example Example file
Accessible without login Plain text file README.md Data Plugin Description file

  Files folder image Files  /  js  
File Role Description
  Accessible without login Plain text file jquery.min.js Data Jquery File for ajax and javascript functions

 Version Control Unique User Downloads Download Rankings  
 100%
Total:658
This week:1
All time:4,889
This week:560Up
User Ratings User Comments (2)
 All time
Utility:80%StarStarStarStarStar
Consistency:75%StarStarStarStar
Documentation:-
Examples:90%StarStarStarStarStar
Tests:-
Videos:-
Overall:56%StarStarStar
Rank:1786