How can I upload an image with AJAX?

Question

I am trying to upload an image with AJAX. When I try like this, nothing happens. AJAX does not call H_FileUpload.php. But the $("#in_profile_img") part does work. Only the AJAX call does not work. Why doesn't it work?

HTML:

<ul class="dropdown-menu fm-menu" role="menu">
    <li>
        <a href="javascript:void(0)" onclick="$.change_profile_img()">
            <i class="fa fa-pencil"></i> Change
        </a>
    </li>
    <li><a href="#"><i class="fa fa-trash-o"></i> Delete</a></li>
</ul>
<form id="form_profile_image" enctype="multipart/form-data" action="" method="POST">
    <input type="file" name="profile_img" id="in_profile_img" style="display:none;" />
</form><!-- profile image form -->

JavaScript:

$.change_profile_img = function() {
    $("#in_profile_img").click();
}

$("#in_profile_img").on('change', (function(e) {
    e.preventDefault;
    var formData = new FormData(this);

    $.ajax({
        url : "./handlers/H_FileUpload.php",
        type : "POST", 
        data : formData,
        cache : false,
        contentType : false,
        processType : false,
        success : function(data) {
            alert("Success");
            alert(data);
        }
    });
}));

PHP (H_FileUpload.php):

<?php
$name = $_FILES["profile_img"]["name"];
$result["ok"] = $name;

echo json_encode($result);

?>

im not sure why you are having `click()` on the function and your event is `change()`? — guradio, Oct 30 '15 at 07:59
yes, click event for open the directory and change event for choose image and that is not the question or answer — Dauezevy, Oct 30 '15 at 08:01
I recommend having an upload button there after choosing an image. Why? because if you keep on changing picture then firing an ajax to upload an image image to your server, that is not a good thing. You need to consider also, when fired an ajax with a large filesize then suddenly user change the image. What do you think will happen? I'm pretty sure you didn't include that scenario — Drixson Oseña, Oct 30 '15 at 08:04

score 1 · Accepted Answer · answered Oct 30 '15 at 08:33

1

Change this line

var formData = new FormData(this);

to

var formData = new FormData($('#form_profile_image')[0]);

answered Oct 30 '15 at 08:33

Ibrahim Khan

20,616
7
42
55

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

You can do like this:

var formData = new FormData($(this)); //$(this) is an object

Or you can do add more parameter:

var formData = new FormData();
formData.append('image', $('input[type=file]')[0].files[0]);

Please see: How to use FormData for ajax file upload

edited May 23 '17 at 12:16

Community

1
1

answered Oct 30 '15 at 08:44

P. Frank

5,691
6
22
50

Crunch Much · Answer 3 · 2015-10-30T09:28:20.843

You have several errors,

Select form when using FormData object.
Specify enctype.
use processData not processType.

try this

    $("#in_profile_img").on('change', function(e){

        e.preventDefault;

        var formData = new FormData(document.getElementById("form_profile_image"));

        $.ajax({
            url : "./handlers/H_FileUpload.php",
            type : "POST", 
            data : formData,
            cache : false,
            enctype: 'multipart/form-data',
            contentType : false,
            processData : false,
            success : function(data) {
                alert("Success");
                alert(data);
            }
        });

    });

Hope this will help

score 0 · Answer 4 · answered Oct 30 '15 at 08:59

Try this

Try this in your ajax

var data = new FormData($('#posting_comment')[0]);
    $.ajax({
                   type:"POST",
                   url:"handlers/H_FileUpload.php",
                   data:data,
                   mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData: false,
                   success:function(data)
                  {
                        //alert(data);
                          $(".image").html(data);
                   }
           });

IN your php file

$attachment_file=$_FILES["profile_img"];
$output_dir = "upload/";
$fileName = $_FILES["profile_img"]["name"];
move_uploaded_file($_FILES["profile_img"]["tmp_name"],$output_dir.$fileName);
//echo "File uploaded successfully";

For more read this tutorial http://w3code.in/2015/10/how-to-upload-file-using-php-and-ajax-beginner-guide/

score 0 · Answer 5 · answered Jul 08 '17 at 16:22

You could use jquery which would significantly simplify the task. Import jquery: https://code.jquery.com/jquery-3.2.1.min.js

var formData = $("#in_profile_img");
$.post('./handlers/H_FileUpload.php',{data:formData},function(e){
    alert("success");
    alert(e);
});

How can I upload an image with AJAX?

5 Answers5