How to debug a non-working response from AJAX in CodeIgniter?

353
November 26, 2016, at 8:57 PM

I want to upload photo with jquery-ajax in CodeIgniter. First I want to pass file to my controller for just check my AJAX call properly working or not. My code is not posting anything to my controller. I posting my code here, please show me my fault

Here is my code

jQuery and my input of my view is here (profile_view.php)

<script type="text/javascript">
$(document).ready(function() {
    $("#file1").on("change", (function() {
        $("#showimage").fadeIn("slow").html('');
        $("#showimage").fadeIn("slow").html('Plaese Wait...');
        alert('hello');
        $("#frm1").ajaxForm({
            target: '#showimage',
            success: function(response) {
                alert(response);
            },
            error: function(err) {
                alert(err);
            }
        }).submit();
    }));
</script>

My input code is here

<div id="photoframe">
    <form name='frm1' id="frm12" enctype="multipart/form-data" method="post" action="upload_photo">
        <input type="file" name="file1" id="file1" style="visibility:hidden" />
    </form>
    <a style="color:white"><i class="fa fa-edit" id="img1">Edit  Photo</i></a>
    <div id="showimage" name='showimage'>
    </div>
</div>

My controller is Here (upload_photo.php)

class Upload_photo extends CI_Controller {
function __construct() {
    parent::__construct();
    $this - > load - > helper(array('form', 'url'));
}
public
function index() {
    $config['upload_path'] = '/user';
    $config['allowed_types'] = 'gif|jpg|png';
    $config['max_size'] = '100';
    $config['max_width'] = '1024';
    $config['max_height'] = '768';
    if (isset($_POST['frm1'])) {
        echo 'Image Uploaded';
        echo "post".$_FILE['frm1'];
    } else {
        echo 'Image Upload Failed';
    }
}
}

My output is : Image Upload Failed

Answer 1

I think there is problem with your request, You have not passed any data with that request, You can use following data method to pass data with ajax:-

$.ajax({
     url: "post.php",
     data: {
        id: 123
    },
     type: "GET",
     dataType : "json",
     success: function( json ) {
        // Do your code here for success
    },
     error: function( xhr, status, errorThrown ) {
        alert( "Sorry, there was a problem!" );
    },
     complete: function( xhr, status ) {
        alert( "The request is complete!" );
    }
});

And you can not send image file with these AJAX request.

Please change your PHP code also, something like following :-

if (isset($_FILES['frm1'])) {
   // Do your upload code here
}
else
{
    echo 'Image Upload Failed';
}
Answer 2

This is the ajax call for non processed data (in your case upload images):

var form = $('frm12');
        var formdata = false;
        if (window.FormData){
            formdata = new FormData(form[0]);
        }
        var formAction = form.attr('action');
        $.ajax({
            url: formAction,
            data : formdata ? formdata : form.serialize(),
            cache : false,
            contentType : false,
            processData : false,
            dataType: "json",
            type : 'POST',
            resetForm: true,
        })
        .done(function(data) {
           //returned response
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

Please note the "processData: false", this is needed to tel ajax to not act as a standard data transfer.

"By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false." from http://api.jquery.com/jquery.ajax/. You can find here explaination about the jquery.ajax settings.

Is worth to mention that if you want to make some checks before sending the data to the server (and I reccoment this) you can also use the "beforeSend: beforeSubmit," setting where "beforeSubmt" is a function that you can implement where you will make all the needed checks (e.g. allowed file type, allowed file size and more...). If something fails than the data will not be uploaded.

Rent Charter Buses Company
READ ALSO
how can i use jquery validation in angularjs?

how can i use jquery validation in angularjs?

How can I use this code in angularjsI m newly in angularjs please guide to me

289
JQuery selection not working [duplicate]

JQuery selection not working [duplicate]

This question already has an answer here:

291
Is it possible to use two colours for font in one jquery string?

Is it possible to use two colours for font in one jquery string?

I'm a beginner at coding, and would like to know if it is possible to use two different colors in one jquery string? For example, if I wanted to make the word 'Message' to be in black (which it already is), and 'Example' to be in a light grey, what would I have to do?

288
offsetWidth not calculated properly when text has a special character

offsetWidth not calculated properly when text has a special character

i am trying to find the text width for my scenariohere is my code(Simple Example)

401