使用Java脚本提交按钮提交具有文件的表单

Question

java-script : i have a form that feed value to a controller via ajax call . The form get serialized in ajax call and the controller return 'true' on success but the problem is that my form have a file and the file can't be serialized . I am working out how i can receive the file in my controller using this ajax call .

function save()
{    
if(save_method == 'On_submitted') 
    {
          url = "<?php echo site_url('MyController/insertForm')?>";
            $.ajax({
                url : url,
                type: "POST",
                data:$('#form_name').serialize(),
                dataType: "JSON",
                success: function(data)
                {

                    if(data.status) //if success close modal and reload ajax table
                    {
                        $('#modal_name').modal('hide');
                        alert('added successfully');
                        reload_table();
                    }
                    else
                    {
                        for (var i = 0; i < data.inputerror.length; i++) 
                        {
                            $('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
                            $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
                        }
                    }
                    $('#btnSave').text('save'); //change button text
                    $('#btnSave').attr('disabled',false); //set button enable 


                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                    alert('Error adding / update data');
                    $('#btnSave').text('save'); //change button text
                    $('#btnSave').attr('disabled',false); //set button enable 

                }
            });

    }
}

When i omit the input file fields than its working fine , the main problem is to send the file to controller via java-script . i have tries but i am don't know what is wrong and how can i do it .

Answer 1

you should not use dataType: "JSON" if you sending files.

you can form data for request using (filesForm = name of form):

var formData = new FormData(document.forms.filesForm);

then add other keys:

formData.append("key", keyValue);

and to send this data, add this options to ajax call:

contentType: false,
cache: false,
processData: false,

you need contentType = false (it will be multipart/form-data in fact) if you wish to upload files. and final ajax call should be like this:

$.ajax({
    url: url,
    data: formData,
    contentType: false,
    cache: false,
    processData: false,
    type: 'POST',
    success: function (result) {
        $("#result").html(result)
    },
    error: function (result) {
        $("#result").html(result)
    }
});