I want to upload file my file

Question

I was getting undefined file as an error in my php while uploading a file.

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());
    $.ajax({
        url: 'jb_data_charity_submit.php',
        type: 'POST',
        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;
}

<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>

In my php

<?php

$files = $_FILES['file']['name'];
$files_tmp = $_FILES['file']['tmp_name'];
$copy = copy($files_tmp, $files);
//echo $_POST['file'];
move_uploaded_file($files_tmp, "C:\wamp32\www\jb_from_live\src\uploaded_files/" . $files);
?>

If i use the above line then it says undefined index 'file'.But the execution not going after $files=$_FILES['file']['name']; It says undefined index file.

please add complete code... ad refer http://www.w3schools.com/php/php_file_upload.asp — HackerGK, Oct 21 '13 at 04:18
add enctype="multipart/form-data" in your form tag..may be you forget to add this in your form tag — Prafulla, Oct 21 '13 at 04:26
@user2885199 http://stackoverflow.com/questions/4545081/how-to-do-file-upload-using-jquery-serialization I think this may help you. — vaibhavmande, Oct 21 '13 at 04:44
@NathanSrivi yeah i have tested but it showing same undefined file ..Do i have to change anything in my php file? — prakash, Oct 21 '13 at 05:02
@Joke_Sense10 Can you show me how to use your answer in my code.can you help me please/ — prakash, Oct 21 '13 at 05:03

score 0 · Answer 1 · edited May 23 '17 at 12:10

~~Make sure your file upload form has attribute enctype="multipart/form-data" otherwise the file upload will not work.~~

You cannot upload a file via ajax that simply unfortunately, for security reasons js doesn't have access to file data and therefore cannot post it via the form serialize function.

If you want to validate other parts of the form and then submit you could write a function like this

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

If you want to use HTML5 have a geez at this answer which utilizes the FormData() function:

How can I upload files asynchronously?

Otherwise if you with to upload a file asynchronously you'll have to look for a jsp or flash fallback plugin. Here's a really good one: http://blueimp.github.io/jQuery-File-Upload/

score 0 · Answer 2 · answered Oct 21 '13 at 04:41

Send image to this format

$('#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 } 


                  });

Try this in your code like this

<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>

Thanks man but it is showing the same error...Do i have to change anything in my php file? — prakash, Oct 21 '13 at 05:00

score 0 · Answer 3 · answered Oct 21 '13 at 04:51

0

I recommend you to use FormData instead of serialize(). The advantage of using formData is that you can also upload pdf,xml,JSON files by specifying their content-type.

For eg:

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);

answered Oct 21 '13 at 04:51

Joke_Sense10

5,341
2
18
22

Can you show me how to use your answer in my code.can you help me please? – prakash Oct 21 '13 at 05:12
Check this link. And proceed according to that: http://stackoverflow.com/questions/5941393/how-to-pass-input-type-file-data-in-ajax-call – Joke_Sense10 Oct 21 '13 at 05:20

I want to upload file my file

3 Answers3