{"id":2106,"date":"2017-01-23T17:36:41","date_gmt":"2017-01-23T17:36:41","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2106"},"modified":"2022-07-15T09:31:30","modified_gmt":"2022-07-15T09:31:30","slug":"ajax-file-upload-using-jquery-php","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/ajax-file-upload-using-jquery-php\/","title":{"rendered":"Ajax File Upload using jQuery and PHP"},"content":{"rendered":"

The easiest way to upload files in the web application is to use server-side code. The file upload functionality can be implemented with minimal lines of code in the server-side script. In the previous tutorial, we discussed a simple method to upload files in PHP<\/a>. Today we\u2019ll build a simple Ajax file upload script with jQuery and PHP. The main purpose of the Ajax file upload<\/b> functionality is to allow the user to upload files to the server without page refresh.<\/p>\n

There are various jQuery plugins are available to upload files or images without page refresh. But if you want to learn the Ajax file upload process and make your own Ajax file upload script, this step-by-step tutorial will help you a lot.<\/p>\n

Here we\u2019ll show how you can upload files to the server without page refresh using jQuery, Ajax, and PHP. Using our simple Ajax file upload script<\/b>, you can easily implement file upload functionality without using any 3rd party plugin.<\/p>\n

HTML Code<\/h2>\n

Define some HTML elements to display the file uploader container. The user can select a file to upload by clicking on this container element.<\/p>\n

<form<\/span>><\/span>\r\n    <div<\/span> id<\/span>=\"dropBox\"<\/span>><\/span>\r\n        <p<\/span>><\/span>Select file to upload<\/p<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n    <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"fileInput\"<\/span> id<\/span>=\"fileInput\"<\/span> \/><\/span>\r\n<\/form<\/span>><\/span><\/pre>\n
CSS Code<\/h2>\n
Define CSS to make the file uploader box look good and hide the default file select input.<\/p>\n
#dropBox<\/span>{\r\n    border<\/span>: 3px<\/span> dashed #0087F7<\/span>;\r\n    border-radius<\/span>: 5px<\/span>;\r\n    background<\/span>: #F3F4F5<\/span>;\r\n    cursor<\/span>: pointer;\r\n}\r\n#dropBox<\/span>{\r\n    min-height<\/span>: 120px<\/span>;\r\n    padding<\/span>: 35px<\/span>;\r\n    box-sizing<\/span>: border-box;\r\n}\r\n#dropBox<\/span> p<\/span>{\r\n    text-align<\/span>: center;\r\n    margin<\/span>: 2em<\/span> 0<\/span>;\r\n    font-size<\/span>: 17px<\/span>;\r\n    font-weight<\/span>: bold;\r\n}\r\n#fileInput<\/span>{\r\n    display<\/span>: none;\r\n}<\/pre>\n
JavaScript Code<\/h2>\n
First, include the jQuery library that is used to initialize the Ajax request and handle the upload process at the client-side. <\/p>\n
<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n
The following JavaScript code handles the file upload process using Ajax.<\/p>\n