You are here
Ajax PHP 

PHP with Ajax multiple file upload

Arjun JS

Please go through the following steps to implement PHP with Ajax multiple file upload.

Step 1: Create a file called index.php and add below codes

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<title>AJAX Multi Images Upload in PHP </title>
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (e) {
    $("#imguploadform").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "upload.php",
            type: "POST",
            data:  new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            success: function(data){
            $("#gallery").html(data);
            },
            error: function(){}            
       });
    }));
});
</script>
</head>
<body>
<div class="gallery-bg">
<form id="imguploadform" action="upload.php" method="post">
<div id="gallery"></div>
<div id="uploadFormLayer">
<p class="txt-subtitle">Select Multiple Files:</p>
<p><input name="userImage[]" type="file" multiple/><p><!--
<p><input name="userImage[]" type="file"/><p>
<p><input name="userImage[]" type="file"/><p> -->
<p><input type="submit" value="Submit" class="btnUpload" /><p>
</div>
</form>
</div>
</body>
</html>
index.php view raw

Step 2: First create folder called “images”, and then create 2nd file  called upload.php

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
if(is_array($_FILES)) {
    foreach ($_FILES['userImage']['name'] as $name => $value){
        if(is_uploaded_file($_FILES['userImage']['tmp_name'][$name])) {
        $sourcePath = $_FILES['userImage']['tmp_name'][$name];
        $targetPath = "images/".$_FILES['userImage']['name'][$name];
            if(move_uploaded_file($sourcePath,$targetPath)) {
             
            }
        }
    }
    echo "Upload Successfull";
}
?>
upload.php view raw

Click here for github file Repository

Also Read:  How to Integrate Sendinblue Transactional Email

Related posts