使用表单数据上传图像会产生不必要的响应[关闭]

Question

I have one issue with ajax Form Data uploading when I upload an image with ajax image uploaded successfully but it gives an unwanted response because of that I cannot write echo in my code that issue I received from my side.

Please if anyone can help to solve this issues.

My Ajax code.

$("form[name='messageFrom']").submit(function(e) {
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: "controller.php",
        type: "POST",
        data: formData,
        async: false,
        success: function (msg) {

            $('#chatBord').append(msg);
            $('#message').val('');
            $('#imageMessage').val('');
        },
        cache: false,
        contentType: false, 
        processData: false
    });
    e.preventDefault();
});

Response that i received from ajax

����JFIF��>CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), default quality ��C $.' ",#(7),01444'9=82<.342��C 2!!22222222222222222222222222222222222222222222222222��@�"��

My php code

$message=$_REQUEST['message'];
$group_id=$_REQUEST['sendMessageGroupID'];
$imageName=""; $msg_type="";

if(!empty($_FILES['imageMessage']['name'])){
    $extension=pathinfo($_FILES['imageMessage']['name'],PATHINFO_EXTENSION);
    $imageName=md5(time().rand(100,999)).".".$extension;
    image_resize($_FILES['imageMessage']['tmp_name']);
    move_uploaded_file($_FILES['imageMessage']['tmp_name'],"../API/message/".$imageName);
    $message = BASEPATH.'message/'.$imageName;
    $msg_type="2";
}
else {
    $msg_type="1";
}
addMsgInGroup($group_id,$_SESSION['user_id'],$msg_type,$message); ?>

In addMsgInGroup there just an insert query.

Answer 1

you should try this by sending serialized data as you are uploading images This is how you should do ,

$("form[name='messageFrom']").submit(function(e) {
    $.ajax({
        url: "controller.php",
        type: "POST",
        data: $("form[name='messageFrom']").serialize(),
        async: true,
        success: function (msg) {

            $('#chatBord').append(msg);
            $('#message').val('');
            $('#imageMessage').val('');
        },
        cache: false,
        contentType: false, 
        processData: false
    });
    e.preventDefault();
});

I have made two changes in your code

data: $("form[name='messageFrom']").serialize(),
async: true,

In your ajax code I am sending code by serializing it and made aysnc : true

and at PHP side in controller.php receive it using $_POST

Try this and let me know if this works for you :)