input file (image ) show empty array , should i have data in array?

Question

html

<form method="post" action="" id="dataForm">
    <input type="file" name="embleLoader"/>
    <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
</form>

Js

$(document).ready(function(){
    $('#dataForm').on('submit', function(e) {
        e.preventDefault();
        SendData();
    });
});

function SendData(){
    var postData = $("#dataForm").serializeArray();

    $.ajax({
    type: "POST",
    url: "checkinput.php",
    data: postData,
    success:function(data)
    {
        console.log(data);
        console.log("suceess");
    },
    error: function(jqXHR, textStatus, errorThrown) 
    {
        console.log("failure");
    }
    });
}

php

<?php
$get = $_FILES["embleLoader"];
print_r($_FILES);
?>

my intention is to pass my input file (image value) to php using ajax , the data to pass to php and i use $_FILES to check my input file data , it give me empty array , why i cant get the data using my code ? should it be some inside the array tmp_name or error>0 . something like that?

how do i pass image using input file and pass to php.

return result:

Array
(
)

inputfile.html:30 suceess

Possible solution, Append is missing, you have to append the file data to your ajax posted data. that code is missing. `http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php` — Amit Sarwara, Jan 08 '16 at 05:45

score 0 · Answer 1 · answered Jan 08 '16 at 05:45

0

Try this in form

<form method="post" action="" id="dataForm" enctype="multipart/form-data">

answered Jan 08 '16 at 05:45

shiva chauhan

410
2
7

cant the array still empty – Jung Jan 08 '16 at 06:03
A code block alone does not provide a good answer. Please add explanations (why it solve the issue, where was the mistake, etc...) – Louis Barranqueiro Jan 08 '16 at 12:59

dhi_m · Answer 2 · 2016-01-08T06:07:17.403

You need to use enctype form attribute to upload files. Please try this

<form method="post" action="" id="dataForm" enctype="multipart/form-data">
    <input type="file" name="embleLoader"/>
    <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
</form>

Update your ajax script with below code and try.

 $.ajax({
        type: "POST",
        contentType: false,
        processData: false,
        url: "checkinput.php",
        data: postData,
        success:function(data)
        {
            console.log(data);
            console.log("suceess");
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            console.log("failure");
        }
    });

ohh still can not ~ i have no idea why. – Jung Jan 08 '16 at 06:17 — Jung, Jan 08 '16 at 06:17

score 0 · Accepted Answer · answered Jan 08 '16 at 06:10

You need to store file info in a global variable when the file is selected then use that global variable to send file, something like this will work :

The HTML :

<form method="post" action="" id="dataForm" enctype="multipart/form-data">
            <!-- assign a id to input field here -->
            <input type="file" name="embleLoader" id="fileSelector"/>
            <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
</form>

Javascript:

<script type="text/javascript">
    var fileVar = null;// global var to store file info
    $(document).ready(function(){
        $('#dataForm').on('submit', function(e) {
            e.preventDefault();
            SendData();
        });

        $('#fileSelector').on('change',function(ev){
            fileVar = null;
            fileVar = new FormData();
            $.each(ev.target.files, function(key, value)
            {
                fileVar.append(key, value);                 
            });
        });
    });

    function SendData(){
        $.ajax({
            type: "POST",
            url: "checkinput.php?files",//you need to add this '?files part' to URL
            data: fileVar,// use fileVar here now
            cache: false,
            processData: false, 
            contentType: false, 
            success:function(data)
            {
                console.log(data);  
                console.log("success");
            },
            error: function(jqXHR, textStatus, errorThrown) 
            {
                console.log("failure");
            }
        });
    }
</script>

score 0 · Answer 4 · answered Jan 08 '16 at 06:23

First we need to add enctype form attribute to upload files. Then we need some changes in ajax code , please check below code :

<form method="post" action="" id="dataForm" enctype="multipart/form-data">
    <input type="file" name="embleLoader"/>
    <input type="text" name="text"/>
    <button name="sub-comfirm" class="btn-selection-content" type="submit" id="sub-comfirm">Send</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#dataForm').on('submit', function(e) {
        e.preventDefault();
        SendData();
    });
});

function SendData(){
    var formData = new FormData($("#dataForm")[0]);

    $.ajax({
    type: "POST",
    url: "checkinput.php",
    data: formData,
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success:function(data)
    {
        console.log(data);
        console.log("suceess");
    },
    error: function(jqXHR, textStatus, errorThrown) 
    {
        console.log("failure");
    }
    });
} 
</script>

input file (image ) show empty array , should i have data in array?

4 Answers4