Я хочу загрузить файл мой файл

Я рекомендую использовать FormData вместо serialize(). Преимущество использования formData заключается в том, что вы также можете загружать файлы PDF, xml, JSON, указывая их тип содержимого.

Например:

var fData = new FormData();
fData.append("XML",  new Blob([ xml ], { type: "text/xml" });
fData.append("JSON", new Blob([ JSON.stringify(json) ], { type: "application/json" }));
fData.append("PDF",  file);

Отправить изображение в этом формате

$('#form').submit(function() {

    var img=$('#image').val();

    var forms=($(this).serialize());


           $.ajax({
          type:"POST",          
          url: "do.php?do=upload",
          data:forms+'&r='+encodeURIComponent(img),
          success: function(result){ //your code } 


                  });

Попробуйте это в своем коде, как это

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 function click_submit_form(){

    var action = "jb_data_charity_submit.php";
               // alert("I step"+$('#id_frm_per_details, #id_frm_acc_details , #id_frm_charity_details').serialize());
    var img=$('#id_file').val();

    var forms=($('#id_frm_charity_details').serialize());

                $.ajax({
                    url: 'jb_data_charity_submit.php',
                    type: 'POST',
                    data:forms+'&r='+encodeURIComponent(img),
                   // data: $('#id_frm_charity_details').serialize(),
                    success: function(data_in) {
                        //alert(data_in);
                        if (data_in != null && !isEmpty(data_in) && (data_in).indexOf('VALIDATION_ERROR') != -1) {


                            var value = data_in.substr(data_in.indexOf('VALIDATION_ERROR'), data_in.indexOf('|#END#'));
                            var array_str = value.split('|')


                            //alert(array_str[0]);
                            //alert(array_str[1]);
                            //alert(array_str[2]);

                            var id_val = "#id_" + array_str[1].trim();
                            show_error(id_val, array_str[2])
                        } else {



                            window.location.replace('jb_charity_regn_confirm.html');
                             alert(data_in);
                            // alert("FINAL");
                        }
                    }
                });


                return false;


            }
            </script>
 <form class='form-vertical' id='id_frm_charity_details' name='frm_charity_details' action='jb_data_harity_submit.php' enctype='multipart/form-data' >

<input id="id_file" name="file"  class="input-file" type="file">
 <a onclick='click_submit_form();' href="#" class="btn btn-info btn-custom8 btn-large  "><i class=" icon-play"></i> Submit Application</a>
</form>

Убедитесь, что ваша форма загрузки файла имеет атрибут enctype = "multipart/form-data", иначе загрузка файла не будет работать.

Вы не можете загрузить файл через ajax, что просто, к сожалению, по соображениям безопасности js не имеет доступа к файлам данных и поэтому не может публиковать его через функцию сериализации формы.

Если вы хотите проверить другие части формы и затем отправить, вы можете написать такую функцию

function submit(){
    var valid = true;
    //TODO: check validation on form, set valid to false if incorrect
    if( valid )
        document.forms[0].submit();
    return false;
}

Если вы хотите использовать HTML5, у вас есть geez в этом ответе, который использует функцию FormData():

Как я могу загружать файлы асинхронно?

В противном случае, если вы загрузите файл асинхронно, вам придется искать резервный плагин jsp или flash. Здесь действительно хороший: http://blueimp.github.io/jQuery-File-Upload/