Hello This is Ganesh Sharma , Posting this blog for uploading multiple images using jquery ajax and php.
index.html file:
index.html file contains some JavaScript and HTML codes. All codes are given below.
JavaScript Code
At first we need to include two external js file. One is jQuery min file and another jquery.form.js file is used for Ajax form submission with files.
Now write some JavaScript code for form submission and displaying the uploaded images.
HTML Code
Input file field name is defined as an array for accept multiple file name and also used multiple attributes for multiple upload support.
Create div with target id which is defined at the above JavaScript code. The uploaded images would be displayed at this div. Also you can change this div id, but remember that the JavaScript target option value (target:'#images_preview') will be same with this div id.
upload.php file:
upload.php file contain some PHP codes for process the uploading and generates the images view. There are two way to upload images and display the images.
One Way is to create a folder named uploads/. Upload the images and stored in the folder.
$val){
//upload and stored images
$target_dir = "uploads/";
$target_file = $target_dir.$_FILES['images']['name'][$key];
if(move_uploaded_file($_FILES['images']['tmp_name'][$key],$target_file)){
$images_arr[] = $target_file;
}
}
?>
You can upload the images and display the images without stored in the folder.
$val){
//display images without stored
$extra_info = getimagesize($_FILES['images']['tmp_name'][$key]);
$images_arr[] = "data:" . $extra_info["mime"] . ";base64," . base64_encode(file_get_contents($_FILES['images']['tmp_name'][$key]));
}
?>
Generate images view
After uploading the images we need to generate the view. This view will display at the target div.
