Image Upload using jquery and ajax

JavaScript
1

Hi everyone, i create a simple php script to upload images it is working nice, but now i need to do it using jquery and ajax, because as i am using only php, when i send an image it redirect the page to a white page.

well this is my simple comment system with jquery and ajax, it is simple and i tried to create some like this to image uploads but i cant use this method to image uploads,here is the code of the simple comment system, if anyone can help me with the images will be great…

HTML Code


<form id ="Forms" action="javascript:comments()" method="post">
            <textarea id="comment"
placeholder="Say something"></textarea>
            <input type="submit">
        </form>

JavascriptCode


function comments() {

    var comment = $('#comment').val();

    $.ajax({
        async: false,
        url:        'comment.php',
        type:       'POST',
        dataType:   'json',
        data: {
            comment:             $('#comment').val()
        },

        success:function(data) {

            $("ul.#InsertThings").prepend(data);

        }

    });
}

Comment.php


    $Comment = ($_POST['comment']);

     echo json_encode(...some divs etc and $Comment inside of a div );

Well it is working great, but with photos i cant use this method, i really need some help with that because i never create anything similar and really need to do it.
I searched a lot to find some helps to my problem but cant get the best code for my problem.

Thanks community

2

If you don’t want it to redirect to white page, there’s no need to use Ajax, just change your code so it shows what you want it to show.

Well it is working great, but with photos i cant use this method

Why not? What is the problem. Are you getting an error?

3

is not possibel to send images using this method with jquery and the ajax function, it dont work. You know any method to post images using ajax?i dont want to use plugins

4

What does “dont work” mean? Are you getting an error?
Is it giving problems on the client side (JS) or server side (PHP)? If your problem is with the jQuery, then we’ll move this thread to the JS forum.

5

The problem is that is not possibel to pass the image specifications by the jquery with the ajax function, to upload an image you use:


 $_FILES["file"]["name"] 
 $_FILES["file"]["type"] 
 $_FILES["file"]["size"]
 $_FILES["file"]["tmp_name"];

and you cant pass this thing by the jquery with this ajax function.

The problem is not only javascript, it is php,ajax and js

6

Thread moved to the JS forum.

7

The simplest method is to post to a hidden iframe. Than have the page inside the iframe notify the parent window when a response is returned. Looking up uploading images with iframe without page refresh should yield some results on Google.