PHP and Ajax Asynchronous File Upload using jQuery

PHP Asynchronous File Upload

This tutorial is for beginners, who started working on PHP Project, and wants to add asynchronous file upload feature, so you’re at right place.

Detail Description:

So you might thinking what is file upload? And how it works?

The answer is here, to upload your file from your local machine to the server (website) is called file upload, it works exactly same as the definition, when we select our file from the browser and click submit, the browser takes file from our local machine and submits it to the server and server do his job to save the file to the defined path.

Here I am going to explain step by step process to create the file upload feature along with the source code of this tutorial so that you can easily download and test on your local machine.

The things you should know before following this tutorial:

PHP
HTML
jQuery
CSS
Bootstrap

So let’s start some coding:

Look at the below code, from index.html file:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iTech Empires Demo - PHP File upload using jQuery</title>

<!-- Bootstrap CSS File -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css" />
</head>
<body>

<!-- Content Section -->
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>PHP File Upload using jQuery</h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-0">
<div class="form-group">
<form enctype="multipart/form-data">
<label>Select File to Upload</label>
<input id="file_to_upload" type="file" class="form-control" />
</form>
</div>
<div class="form-group">
<button onclick="uploadFile()" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<!-- /Content Section -->

<!-- Jquery JS file -->
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<!-- Bootstrap JS file -->
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

<!-- Custom JS file -->
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<!DOCTYPE html>

<head>

<title>iTech Empires Demo - PHP File upload using jQuery</title>

</head>

<body>

<h2>PHP File Upload using jQuery</h2>

</div>

<label>Select File to Upload</label>

</form>

</div>

<button onclick="uploadFile()" class="btn btn-primary">Submit</button>

</div>

</body>

</html>

Form and Input Field: The basic need to upload file is to have <form> with enctype="multipart/form-data", if you notice the above file I have added form with enctype, next is the input field of file type, we have this field with the ID “file_to_upload“.

Submit Button: After </form> we have Submit button included with onClick event along with function call uploadFile(), we are going to write this function under script.js file, which is going to handle file upload operation.

Create script.js file:

Let’s create script.js file and add following source code in to it:

script.js:

/*
// Version 1.0
// iTech Empires - jQuery File Upload Script
*/
function uploadFile()
{
if($("#file_to_upload").val() != "")
{
var file_data = $('#file_to_upload').prop('files')[0];
var form_data = new FormData();

form_data.append('file', file_data);

$.ajax({
url: 'uploadFile.php', // point to server-side PHP script
dataType: 'text', // what to expect back from the PHP script, if anything
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(data){
// get server responce here
alert(data);
// clear file field
$("#file_to_upload").val("");
}
});
}
else
{
alert("Please select file!");
}
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

/*

// Version 1.0

// iTech Empires - jQuery File Upload Script

*/

function uploadFile()

{

if($("#file_to_upload").val() != "")

{

var file_data = $('#file_to_upload').prop('files')[0];

var form_data = new FormData();

form_data.append('file', file_data);

$.ajax({

url: 'uploadFile.php', // point to server-side PHP script

dataType: 'text', // what to expect back from the PHP script, if anything

cache: false,

contentType: false,

processData: false,

data: form_data,

type: 'post',

success: function(data){

// get server responce here

alert(data);

// clear file field

$("#file_to_upload").val("");

}

});

}

else

{

alert("Please select file!");

}

So we have our script.js file ready, here we have uploadFile() function is defined, this function is basically to check validation and get the selected file from input field and submit it to the uploadFile.php page asynchronously using ajax.

So now we need to create uploadFile.php, so go ahead and crated this file to the root, and use following source code:

uploadFile.php

<?php

if ( 0 < $_FILES['file']['error'] ) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else
{
move_uploaded_file($_FILES['file']['tmp_name'], 'files/' . $_FILES['file']['name']);
echo "File uploaded successfully!!";
}
?>

1

2

3

4

5

6

7

8

9

10

11

<?php

if ( 0 < $_FILES['file']['error'] ) {

echo 'Error: ' . $_FILES['file']['error'] . '<br>';

}

else

{

move_uploaded_file($_FILES['file']['tmp_name'], 'files/' . $_FILES['file']['name']);

echo "File uploaded successfully!!";

}

?>

Just a 10 lines code 🙂 yes this lines is to have our file uploaded to the files folder on server, we are using move_uploaded_file() function here. if you remember we had send selected file from “file_to_upload” input field.

We are done with the code, find out following tutorial folder structure and complete source code below:

Demo Screen:

if your done with all above steps then go ahead and run the code on your server if not you can download the code from the below link as well.

4 COMMENTS

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe

newest oldest most voted

Guest

kaleem nalband

Thank you for this tutorial its works really great. Thank you…

Guest

Jero Jerromon

sir, sorry, but can you kindly please explain to me about getting path string of the uploaded images, and inserting it into the database, i’ve been working on your tutorial about CRUD operation using Jquery, and i want to implement image for user, but i am stuck, no image uploaded to my server folder and no path record in database. this is what i’ve tried for the php file: if(isset($_POST[‘username’]) && isset($_POST[’email’]) && (isset($_FILES[“file”][“type”])){ $tmp = $_FILES[‘file’][‘tmp_name’]; $Path = “uploads/”.$_FILES[‘file’][‘name’]; if(move_uploaded_file($tmp,$Path)) { $query = “INSERT INTO users(username, email, image) VALUES(‘$username’, ‘$email’, ‘$Path’, ”)”; if (!$result = mysql_query($query)) { echo”No data… Read more »

Guest

Vikram singh

great tutorial. Which web framework u use sir.

Guest

Yogesh Koli

You’re asking for specific tutorial or regarding website development ?
Although I use laravel framework for development, there lot more tutorials coming related to laravel.

PHP and Ajax Asynchronous File Upload using jQuery

PHP Asynchronous File Upload

Detail Description:

So let’s start some coding:

Demo Screen:

4 COMMENTS

Tutorials You May Like!

Laravel 5.5 VueJs 2.0 CRUD Operations Application

JQuery – Username Availability Validation using PHP and MySQL

Export Data from MySQL to CSV Using PHP

MySQL Database Backup and Restore from Terminal

Asynchronous Image to DATA URIs Conversion using PHP and jQuery

PHP and Ajax Asynchronous File Upload using jQuery

PHP Asynchronous File Upload

Detail Description:

So let’s start some coding:

Demo Screen:

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

RELATED TUTORIALS

4 COMMENTS

Tutorials You May Like!