Ajax Select and Upload Multiple Images

[jamo]

In my last tutorial, I had posted an article about Multiple File and Drop Upload using HTML5 and jQuery. In this article, the user allows to select and upload multiple images in a single shot.

Creating Database Table

1. CREATE
   
   TABLE
   
   `user_uploads`
   
   (
   
2. `id`
   
   INT
   
   (
   
   11
   
   )
   
   NOT
   
   NULL
   
   ,
   
3. `image_name`
   
   VARCHAR
   
   (
   
   100
   
   )
   
   NOT
   
   NULL
   
   ,
   
4. `user_id`
   
   INT
   
   (
   
   11
   
   )
   
   NOT
   
   NULL
   
   ,
   
5. `date_upload`
   
   VARCHAR
   
   (
   
   100
   
   )
   
   NOT
   
   NULL
   
6. )
   
   ENGINE=
   
   InnoDB DEFAULT
   
   CHARSET=
   
   latin1;
   

Creating Markup

Creating form field where the user can select images to upload.

1. <div
   
   align
   
   =
   
   "center"
   
   >
   
2. 
   
3. <div
   
   id
   
   =
   
   'preview_Upload_images'
   
   >
   
4. </
   
   div
   
   >
   
5. 
   
6. <form
   
   id
   
   =
   
   "form_Images"
   
   method
   
   =
   
   "post"
   
   enctype
   
   =
   
   "multipart/form-data"
   
   action
   
   =
   
   'ajaxImageUpload.php'
   
   style
   
   =
   
   "clear:both"
   
   >
   
7. <h1
   
   >
   
   Upload your images</
   
   h1
   
   >
   
8. <div
   
   id
   
   =
   
   'status_image_Loading'
   
   style
   
   =
   
   'display:none'
   
   ><img
   
   src
   
   =
   
   "loader.gif"
   
   alt
   
   =
   
   "Uploading...."
   
   /
   
   ></
   
   div
   
   >
   
9. <div
   
   id
   
   =
   
   'button_Image_loading'
   
   >
   
10. <input
    
    type
    
    =
    
    "file"
    
    name
    
    =
    
    "photos[]"
    
    class
    
    =
    
    "file_image"
    
    id
    
    =
    
    "image_Photo"
    
    multiple
    
    =
    
    "true"
    
    /
    
    >
    
11. </
    
    div
    
    >
    
12. </
    
    form
    
    >
    
13. 
    
14. </
    
    div
    
    >
    

JavaScript Source Code

Kindly copy and paste this script and link to your HEAD tag of your page.

1. <script
   
   src
   
   =
   
   "js/jquery.min.js"
   
   ></
   
   script
   
   >
   
2. <script
   
   src
   
   =
   
   "js/jquery.wallform.js"
   
   ></
   
   script
   
   >
   
3. <script
   
   >
   
4. $(document).ready(function() {
   
5. 
   
6. $('#image_Photo').die('click').live('change', function() {
   
7. //$("#preview_Upload_images").html('');
   
8. 
   
9. $("#form_Images").ajaxForm({target: '#preview_Upload_images',
   
10. beforeSubmit:function(){
    
11. 
    
12. console.log('ttest');
    
13. $("#status_image_Loading").show();
    
14. $("#button_Image_loading").hide();
    
15. },
    
16. success:function(){
    
17. console.log('test');
    
18. $("#status_image_Loading").hide();
    
19. $("#button_Image_loading").show();
    
20. },
    
21. error:function(){
    
22. console.log('xtest');
    
23. $("#status_image_Loading").hide();
    
24. $("#button_Image_loading").show();
    
25. } }).submit();
    
26. });
    
27. });
    
28. </
    
    script
    
    >
    

Was this article helpful?

Kindly click the "Download Code" button below for full source code. Thank you very much.

Hope that this tutorial will help you a lot.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download