Image upload functionality is commonly used in web applications and it can be easily implemented using PHP. But if you want to implement image upload functionality without page refresh, jQuery and Ajax are required with PHP. Upload image without page refresh provides a user-friendly interface for the web application. With Ajax file upload<\/b> functionality the user can upload images without reloading or refreshing the current page.<\/p>\n
Generally, the file input field uploads a single image at a time. But in some cases, your web application requires allowing the user to upload multiple images at the same time. In this tutorial, we will show you how to upload multiple images without page refresh<\/b> using jQuery, Ajax, and PHP. Ajax multiple image upload allows the user to select multiple image files at once and upload all the images to the server in a single click.<\/p>\n
The example code helps you to upload multiple images at once without page refresh using jQuery, Ajax, and PHP. It simplifies the multiple image upload<\/b> without refreshing the page. There are two ways to display the preview of the uploaded image. You can show the uploaded images with or without stored in a directory of the server.<\/p>\nMultiple Files Upload Form<\/h2>\n
We will use the HTML to create a file upload form and jQuery to post the images to the server-side for upload.<\/p>\n
JavaScript Code:<\/b> The ajaxForm method of jQuery Form Plugin prepares the HTML form for AJAX submission. Any HTML Code:<\/b> Uploaded Images Preview: Create div with target ID which is defined in
\nThe jQuery Form Plugin<\/b> will be used to post file data via Ajax request. It allows you to upgrade the HTML file upload form to use AJAX. So, include the jQuery library and jQuery Form Plugin to submit the form with files for uploading using jQuery and Ajax.<\/p>\n<!-- jQuery library --><\/span>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"js\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- jQuery Form Plugin --><\/span>\r\n<script<\/span> type<\/span>=\"text\/javascript\"<\/span> src<\/span>=\"js\/jquery.form.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\n$.ajax<\/code> options can be passed in ajaxForm() function.<\/p>\n\n
target<\/code> – Specify the element(s) to update with the server response.<\/li>\nbeforeSubmit<\/code> – A callback function that is invoked before form submission.<\/li>\nsuccess<\/code> – A callback function that is invoked after the response has been returned from the server.<\/li>\nerror<\/code> – A callback function that is invoked if an error occurred.<\/li>\n<\/ul>\n<script<\/span>><\/span>\r\n$(document<\/span>).ready(function<\/span>(<\/span>)<\/span>{\r\n $('#uploadForm'<\/span>).ajaxForm({\r\n target:'#imagesPreview'<\/span>,\r\n beforeSubmit:function<\/span>(<\/span>)<\/span>{\r\n $('#uploadStatus'<\/span>).html('<img src=\"css\/uploading.gif\"\/>'<\/span>);\r\n },\r\n success:function<\/span>(<\/span>)<\/span>{\r\n $('#images'<\/span>).val(''<\/span>);\r\n $('#uploadStatus'<\/span>).html(''<\/span>);\r\n },\r\n error:function<\/span>(<\/span>)<\/span>{\r\n $('#uploadStatus'<\/span>).html('<p>Upload failed! Please try again.<\/p>'<\/span>);\r\n }\r\n });\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\n
\nCreate an HTML form with an input field to allow the user to select multiple images they want to upload.<\/p>\n\n
method=\"post\"<\/code> and enctype=\"multipart\/form-data\"<\/code><\/li>\ntype=\"file\"<\/code> and multiple attributes.<\/li>\n<\/ul>\n<!-- images upload form --><\/span>\r\n<form<\/span> method<\/span>=\"post\"<\/span> id<\/span>=<\/span>\"uploadForm\"<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span> action<\/span>=\"upload.php\"<\/span>>\r\n <label<\/span>>Choose Images<\/label<\/span>>\r\n <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"images[]\"<\/span> id<\/span>=<\/span>\"images\"<\/span> multiple<\/span> >\r\n <input<\/span> type<\/span>=\"submit\"<\/span> name<\/span>=\"submit\"<\/span> value<\/span>=\"UPLOAD\"<\/span>\/>\r\n<\/form<\/span>>\r\n\r\n<!-- display upload status --><\/span>\r\n<div<\/span> id<\/span>=<\/span>\"uploadStatus\"<\/span>><\/div<\/span>>\r\n<\/pre>\najaxForm<\/code> of Form Plugin API. The uploaded images will be displayed in this div.<\/p>\n<!-- gallery view of uploaded images --><\/span> \r\n<div<\/span> class<\/span>=\"gallery\"<\/span> id<\/span>=<\/span>\"imagesPreview\"<\/span>><\/div<\/span>>\r\n<\/pre>\n