JQuery multipart/data ajax post

Question

I am using JQuery to post form data and I have added this into my function to allow it to post / upload files:

mimeType:"multipart/form-data",

I am calling it in my HTML form here:

<form id="form1" method="post" action="/tickets/record?type=<?php echo $_GET["type"]; ?>&seq=<?php echo $_GET["seq"]; ?>" enctype="multipart/form-data" onsubmit="post_form('#form1');">

and trying to handle the attachments in PHP with:

$attachment_array = array();    
foreach($_FILES['ticket_update_files']['name'] as $key => $value) {
    if(!$_FILES['ticket_update_files']['error'][$key]) {

    } 
}

but its not recognising that any files that have been selected.

My full jquery function is:

function post_form(form_id, type, redir_url, loading_modal) {
    type = type || '';
    redir_url = redir_url || '';
    loading_modal = loading_modal || '';

    $( form_id ).submit(function(e) {
        var formObj = $(this);
        var formURL = formObj.attr("action");
        var formData = new FormData(this);

        CheckRequired(e);

        if(loading_modal === '1') { } else {
            LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading');
        }

        $.ajax({
            url : '/section' + formURL,
            type: "POST",
            data : formData,
            mimeType:"multipart/form-data",
            contentType: false,
            cache: false,
            processData:false,
            success:function(data, textStatus, jqXHR) {
                //alert(type);
                if(type === 'modal') {
                    if(redir_url === '') {
                        LoadModal('/section' + formURL, '');
                    } else {
                        LoadModal('/section' + redir_url, '');
                    }
                } else if(type === 'reload') {
                    if(redir_url === '') {
                        location.reload();
                    } else {
                        OpenPage(redir_url);
                    }
                } else {
                    //close the loading modal
                    if(loading_modal === '1') { } else {
                        CloseModal();
                    }
                    //location.reload();
                    //$("body").html(data);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails
            }
        });
        return false;
        e.preventDefault();
    });
}

Look at [this question](http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax) maybe it can help you. Look at the correct answer, how he formed the AJAX. — matiaslauriti, Jun 19 '16 at 01:25

Soyab Badi · Answer 1 · 2016-06-24T09:32:59.597

Use this for Jquery multipart/form-data submission.

$(document).ready(function (e) {
    $("#formid").on('submit', (function (e) {
        e.preventDefault();
        $("#message").empty();
        $('#loading').show();
        $.ajax({
            url: "ajax_php_villa_file.php", // Url to which the request is send
            type: "POST",             // Type of request to be send, called as method
            data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
            contentType: false,       // The content type used when sending data to the server.
            cache: false,             // To unable request pages to be cached
            processData: false,
            beforeSend: function () {
                $('.loader-img').show();
            },     // To send DOMDocument or non processed data file it is set to false
            success: function (data)   // A function to be called if request succeeds
            {
                $('.loader-img').hide();
                if (data.trim() != "")
                    $("#imresss").html(data);
            }
        });
    }));
});

elshnkhll · Answer 2 · 2016-06-24T07:34:27.007

Try to add each file to FormData object manually. Here is how.

HTML:

<form id="my_form" method="post" action="" enctype="multipart/form-data">
    <input type="file" id="my_files" multiple>
    <input type="submit">
</form>

js:

$( "#my_form" ).submit(function(e) {
    e.preventDefault();
    var data = new FormData();
    $.each( $('#my_files')[0].files, function(i, file) {
        data.append('file[]', file);
    });
    $.ajax({
        url: 'http://162.243.221.224/multipart/upload.php', // I will keep this script alive for few weeks
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        // mimeType:"multipart/form-data",
        type: 'POST',
        dataType: "text",
        success: function(data){
            alert(data);
        },
        error: function(data){
            alert(data);
        }
  });
    return false;        
});

PHP:

<?php
    print_r( $_FILES['file']['name'] );

Have tested it in Firefox 47.0 with latest jquery. Worked for me (without specifying mimeType in ajax and action attribute in form tag).

score 0 · Answer 3 · answered Jun 23 '16 at 23:26

This is how you do it:

function post_form(form_id, type, redir_url, loading_modal) {
    type = type || '';
    redir_url = redir_url || '';
    loading_modal = loading_modal || '';

    $( form_id ).submit(function(e) {
        var formObj = $(this);
        var formURL = formObj.attr("action");
        var formData = new FormData;
        //File Field
        var regexp = /^[^[\]]+/,
            fileInput = $(form_id+' input[type="file"]'), //If form doesn't work try to select the file input by ID here. ex: fileInput = $("#myFileInputHere");
            fileInputName = regexp.exec(fileInput.attr('name'));
            $.each($(fileInput)[0].files,function(i,file) { 
                formData.append(fileInputName, file); //Add file to form
            });

        CheckRequired(e);

        if(loading_modal === '1') { } else {
            LoadModalBody('<h2 align="center">Loading...</h3><p align="center"><i class="fa fa-refresh fa-spin fa-5x"></i></p>', 'Loading');
        }

        $.ajax({
            url : '/section' + formURL,
            type: "POST",
            data : formData,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data, textStatus, jqXHR) {
                //alert(type);
                if(type === 'modal') {
                    if(redir_url === '') {
                        LoadModal('/section' + formURL, '');
                    } else {
                        LoadModal('/section' + redir_url, '');
                    }
                } else if(type === 'reload') {
                    if(redir_url === '') {
                        location.reload();
                    } else {
                        OpenPage(redir_url);
                    }
                } else {
                    //close the loading modal
                    if(loading_modal === '1') { } else {
                        CloseModal();
                    }
                    //location.reload();
                    //$("body").html(data);
                }
            },
            xhr: function(){
                // get the native XmlHttpRequest object
                var xhr = $.ajaxSettings.xhr() ;
                // set the onprogress event handler
                xhr.upload.onprogress = function(evt){ 
                var perc = Math.round(evt.loaded/evt.total*100);
                console.log(perc+'% Uploading...');
                } ;
                // set the onload event handler
                xhr.upload.onload = function(){ 
                console.log('Uploaded!');
                 } ;
                // return the customized object
                return xhr ;
                } ,
            error: function(jqXHR, textStatus, errorThrown) {
                //if fails
            }
        });
        return false;
        e.preventDefault();
    });
}

Your solution over-complicates everything and will only pass the file type input fields. You can simply do `formData = new FormData(this)` (without doing any regex or appending) that will pass all fields within the form. — Mikey, Jun 23 '16 at 23:48

JQuery multipart/data ajax post

3 Answers3