如何在单个表单字段中添加多个图像时通过AJAX传递下一页中的两个文件值

Question

Here i have two form fields(file upload),first user select the logo and select one banner image means value is getting in next page (home.php).suppose user select one logo and select multiple banner image means i can not get the value in next page (home.php).how can do this ?

<script>
         var i=0;
         $(document).on("click",".add_banner",function() {
            i++;
           var htmlText = '';
           htmlText += '<div class="form-group"><label class="col-md-3 control-label">Project Banners</label><div class="col-md-6"><div class="fileupload fileupload-new" data-provides="fileupload"><div class="input-append"><div class="uneditable-input"><i class="fa fa-file fileupload-exists"></i><span class="fileupload-preview"></span></div><span class="btn btn-default btn-file"><span class="fileupload-exists">Change</span><span class="fileupload-new">Select file</span>';
            htmlText +='<input type="file" name="banners[]" id="banners' + i +'">';
            htmlText += '</span><span style="margin-left:10px"><button type="button" class="btn btn-default add_banner" id="add_banner">Add</button></span><a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a></div></div></div></div>';
            $('#add_banner_append').append(htmlText);
         }); 
     
    </script> 
    
    <script>
  $(document).ready(function(){
            $('#btn-submit').click(function(){
                if($('#empForm').valid()){
                        var formData = new FormData();
                        var formData = new FormData($('#empForm')[0]);
                        formData.append('logo', $('input[type=file]')[0].files[0]);
                        formData.append('banners', $('input[type=file]')[1].files[1]);
                           $.ajax({
                             type:'POST',
                             url :"php/home.php",
                             data: formData,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function(data) {
                                console.log(data);
                                 if(data == "Success"){
                                    $("#alert_success").show();
                                    $("#alert_success").fadeOut(3000);
                                    setTimeout(function () {
                                    window.location.href = "dashboard.php"; 
                                    }, 2000); //will call the function after 2 secs.
                                } 
                               },
                             error:function(exception){
                             alert('Exeption:'+exception);
                            }
                          });
                return false;
                }
            });
        });
        // Shorthand for $( document ).ready()

  </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form class="form-horizontal form-bordered" method="POST" id="empForm">
<div class="form-group">
        <label class="col-md-3 control-label">Project Logo</label>
        <div class="col-md-6">
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="input-append">
                    <div class="uneditable-input">
                        <i class="fa fa-file fileupload-exists"></i>
                        <span class="fileupload-preview"></span>
                    </div>
                    <span class="btn btn-default btn-file">
                        <span class="fileupload-exists">Change</span>
                        <span class="fileupload-new">Select file</span>
                        <input type="file" id="logo" name="logo" required="" data-msg-required="File" value="" aria-required="true">
                    </span>
                    
                </div>
            </div>
        </div>
    </div>
    
    <div class="form-group">
        <label class="col-md-3 control-label">Project Banners</label>
        <div class="col-md-6">
            <div class="fileupload fileupload-new" data-provides="fileupload">
                <div class="input-append">
                    <div class="uneditable-input">
                        <i class="fa fa-file fileupload-exists"></i>
                        <span class="fileupload-preview"></span>
                    </div>
                    <span class="btn btn-default btn-file">
                        <span class="fileupload-exists">Change</span>
                        <span class="fileupload-new">Select file</span>
                        <input type="file" id="banners" name="banners[]" required="" data-msg-required="File" value="" aria-required="true">
                    </span><span style="margin-left:10px">
                    <button type="button" class="btn btn-default add_banner" id="add_banner">Add</button></span>
                    
                </div>
            </div>
        </div>
    </div>
    
    <div id="add_banner_append"></div>
    
    <div class="form-group">
        <div class="col-md-3">
        </div>
            <div class="col-md-6">                                                
            <input type="button" class="btn btn-primary btn-block" id="btn-submit" name="submit" value="SUBMIT">
            </div>
    </div>
  </form

---

$postedBanners = array();
    /* foreach ($_FILES['banners']['name'] as $key => $value) {
        $postedBanners[$key] = array(
            'name' => $_FILES['banners']['name'][$key],
            'type' => $_FILES['banners']['type'][$key],
            'tmp_name' => $_FILES['banners']['tmp_name'][$key],
            'error' => $_FILES['banners']['error'][$key],
        );
    } */
    
    $uploads_dir = '/banners';
    foreach ($_FILES["banners"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["banners"]["tmp_name"][$key];
        // basename() may prevent filesystem traversal attacks;
        // further validation/sanitation of the filename may be appropriate
        $name = $_FILES["banners"]["name"][$key];
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
        }
    }

</div>

Answer 1

You are missing enctype in both html form and ajax calling. You should add enctype in form like as <form class="form-horizontal form-bordered" method="post" id="empForm" enctype="multipart/form-data">.

Aslo add enctype in ajax calling -

$('#btn-submit').click(function(){
                if($('#empForm').valid()){
                        var formData = new FormData();
                        var formData = new FormData($('#empForm')[0]);
                        formData.append('logo', $('input[type=file]')[0].files[0]);
                        formData.append('banners', $('input[type=file]')[1].files[1]);
                           $.ajax({
                             type:'POST',
                             url :"test.php",
                             enctype: 'multipart/form-data',
                             data: formData,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function(data) {
                                console.log(data);
                                 if(data == "Success"){
                                    $("#alert_success").show();
                                    $("#alert_success").fadeOut(3000);
                                    setTimeout(function () {
                                    window.location.href = "dashboard.php"; 
                                    }, 2000); //will call the function after 2 secs.
                                } 
                               },
                             error:function(exception){
                             alert('Exeption:'+exception);
                            }
                          });
                return false;
                }
            });

I have added enctype: 'multipart/form-data' in ajax calling.

At server end you need to get all multiple added banner image as following -

if(!empty($_FILES['banners']['name'])){
    $postedBanners = array();
    foreach ($_FILES['banners']['name'] as $key => $value) {
        $postedBanners[$key] = array(
            'name' => $_FILES['banners']['name'][$key],
            'type' => $_FILES['banners']['type'][$key],
            'tmp_name' => $_FILES['banners']['tmp_name'][$key],
            'error' => $_FILES['banners']['error'][$key],
        );
    }

    echo '<pre>';
    print_r($postedBanners);
}

I will return output as following -

Array
(
    [0] => Array
        (
            [name] => preview.png
            [type] => image/png
            [tmp_name] => /private/var/tmp/php9Fyir9
            [error] => 0
        )

)

For Upload banner images in a folder.

$uploads_dir = '/uploads';
foreach ($_FILES["banners"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $tmp_name = $_FILES["banners"]["tmp_name"][$key];
        // basename() may prevent filesystem traversal attacks;
        // further validation/sanitation of the filename may be appropriate
        $name = basename($_FILES["banners"]["name"][$key]);
        move_uploaded_file($tmp_name, "$uploads_dir/$name");
    }
}