AJAX FILE UPLOAD WITH PHP AND JQUERY

Introduction

I will show you how lớn upload a file using PHP, AJAX & jQuery without page refresh. This tệp tin upload tutorial example is very helpful to implement the upload functionality.

Bạn đang xem: Ajax file upload with php and jquery


In this example the tệp tin is selected using the browse button and tệp tin is uploaded to lớn the uploads directory. PHPhường script stores the file inkhổng lồ the specified location & returns response as a success or failure message from the PHP script. As a validation step I have checked if over users have sầu selected a tệp tin for uploading or not.

Related Posts:

Prerequisites

PHP.. 7.0.15 – 7.4.3, Apabịt 2.4, jQuery 1.12 – 3.5

Implementation Steps

Include jQuery library.HTML page with upload field.jQuery Ajax code.PHPhường script to lớn store the file.

Adding jQuery Library

Include jQuery library inkhổng lồ section of the HTML page:

Or

HTML – File Input

Put the below upload field inside tag in HTML page. As I am going lớn upload file using AJAX technique so you don’t need HTML element.

Single File Upload Example using PHP

Upload

File Upload Handling – AJAX jQuery

Add below jQuery, AJAX code immediate after the jQuery library inside section of the HTML page.

I gọi the hệ thống side PHP script using AJAX technique và show message accordingly whether success or failure.

File Upload Handling – PHP

Create upload.php tệp tin with below source code. I first kiểm tra if tệp tin was selected for uploading. If not selected then show an error.

Xem thêm: alpha hydrox aha enhanced lotion 10


Next I check if there is any error while uploading file then show errors.

Then I check if tệp tin already exists in the uploads directory then I show message – tệp tin already exists. Otherwise I upload the tệp tin into uploads directory under project directory.

Error during tệp tin upload " . $_FILES<"file"><"error"> . "";} else if (file_exists("uploads/" . $_FILES<"file"><"name">)) emang lại "File already exists at uploads/" . $_FILES<"file"><"name"> . ""; else move_uploaded_file($_FILES<"file"><"tmp_name">, "uploads/" . $_FILES<"file"><"name">);emang đến "File successfully uploaded to lớn uploads/" . $_FILES<"file"><"name"> . "";} else echo "Please choose a file";echo nl2br(" ");?>

Testing the Application

Now if you run the above sầu tệp tin by hitting URL http://localhost/php-ajax-single-file-upload/ajax_file_upload.php then you will see below output in the browser:

*

If you try to upload file without selecting any tệp tin then you would see error message Please choose a file.

*

If the tệp tin successfully uploaded then you will see success message File successfully uploaded : uploads/.

*

If the file you are trying to upload already exists then you will see a message File already exists : uploads/.

Hope you have got an idea how khổng lồ upload file using PHPhường, AJAX & jQuery.

Source Code

Download


AJAX, jQuery, PHPAJAX tệp tin upload, PHP AJAX, PHPhường. File Upload

Post navigation