Uploading File using Ajax PHP

Question

I am trying to upload a file and sending it through AJAX.. but i am getting below error..

Notice: Undefined index: xlsFile in

Below is my Coding :

HTML FORM : (this form is in Modal Popup)

<form id="form2" class="importModal" enctype="multipart/form-data">
   Upload Excel File : <input type="file" name="xlsFile" id="xlsFile" />
<button type="button" id="addType" name="addType">Submit</button>
</form>

AJAX Code :

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("button#addTripType").click(function(){
            alert("hello");
            $.ajax({
                type: "POST",
                url: "ajax-Upload.php", // 
                data: $('form.importModal').serialize(),
                success: function(msg){
                    alert("success");
                },
                error: function(){
                    alert("failure");
                }
            });
        });
    });
</script>

What should i Do..??? Need Help..??

ezaeza · Answer 1 · 2015-08-05T15:05:01.057

I had the same issue, it is possible with FormData if you are using IE >= 10. For all and IE >= 8 one way to trick it is using form in iframe.

An easy way to do that is using jquery.form plugin : http://malsup.com/jquery/form/

You can put method and action in your form :

<form id="form2" method="post" action="ajax-Upload.php" class="importModal" enctype="multipart/form-data">
    Upload Excel File : <input type="file" name="xlsFile" id="xlsFile" />
    <input type="submit" id="addType" name="addType" value="Submit" />
</form>

And then with plugin api :

$('#form2').submit(function() {
    $(this).ajaxForm({
        success: function(msg) {
            alert("success");
        },
        error: function(){
            alert("failure");
        }
    });
    return false;
});

Uploading File using Ajax PHP

1 Answers1