form submission with image upload using jquery ajax in laravel5

Question

i am trying to submit a form with image upload using jquery ajax, but each time i select an image and click on submit button alert($(this).serialize()) shows-

_token=TCWpR3n9Uf2FpKMXi639Dcvzhc7t4fVDWDopjZ8V .

here is my form -

{!! Form::open(['action'=>'ImageController@store', 'name'=>'form1', 'id'=>'formId1', 'files'=>true]) !!}

<div class="form-group">
{!! Form::file('image') !!}                         
</div>
<div class="form-group">
{!! Form::submit('Upload', array( 'class'=>'btn btn-danger', 'name'=>'image_form_submit'  )) !!}                        
</div>
{!! Form::close() !!}

here the js-

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("form").submit(function(e){ //
           e.preventDefault();


        alert($(this).serialize()); //always alerts the tocken- _token=TCWpR3n9Uf2FpKMXi639Dcvzhc7t4fVDWDopjZ8V 
        $.ajax({

            type:"POST",
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function(data){
                console.log(data);
            },
            error: function(data){

            }
        })
            return false;
        });
    });
</script>

i want to get the serialized data of form and post via ajax to my controller. why alert always shows the token?

Here in your code their is no form element then token. If you want to upload img then http://stackoverflow.com/questions/19447435/ajax-upload-image?answertab=active#tab-top this should be the code. — Parth Trivedi, Dec 13 '15 at 10:46

score 1 · Accepted Answer · edited Jan 19 '17 at 13:47

1

In case of ajax image uploading "$(this).serialize()" didn't work.

You have to pass (data:formData,) as below -

 $.ajax({
        type:"POST",
        url: $(this).attr('action'),
        data:formData,
        cache:false,
        contentType: false,
        processData: false,
        success: function(data){
            console.log(data);
        },
        error: function(data){

        }
    })

edited Jan 19 '17 at 13:47

RN Kushwaha

2,081
3
29
40

answered Dec 13 '15 at 12:14

Shawinder Jit Singh

91
1

yes, this works! but how to retrieve value of formData in laravel controller? – user-4653387 Dec 13 '15 at 12:26
this will pass value same as serialize() passes ,you can see the output using method Input::all(); – Shawinder Jit Singh Dec 13 '15 at 12:29

form submission with image upload using jquery ajax in laravel5

1 Answers1