PHP Classes

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

Recommend this page to a friend!
     
  Info   Example   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 56%Total: 660 All time: 4,878 This week: 73Up
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: 51631 in India India
Week rank: 56 Up5 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 (4)  
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 (4)  /  js  
File Role Description
  Accessible without login Plain text file jquery.min.js Data Jquery File for ajax and javascript functions

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
 Version Control Unique User Downloads Download Rankings  
 100%
Total:660
This week:0
All time:4,878
This week:73Up
User Ratings User Comments (2)
 All time
Utility:80%StarStarStarStarStar
Consistency:75%StarStarStarStar
Documentation:-
Examples:90%StarStarStarStarStar
Tests:-
Videos:-
Overall:56%StarStarStar
Rank:1819