CODEWITHSUNDEEP
javascriptphpjqueryajax
Dauezevy
Dauezevy

Reputation: 1080

How can I upload an image with AJAX?

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);

?>

Upvotes: 0

Views: 109

Answers (5)

Rayyan Ahmed
Rayyan Ahmed

Reputation: 21

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);
});

Upvotes: 0

Crunch Much
Crunch Much

Reputation: 1527

You have several errors,

  1. Select form when using FormData object.
  2. Specify enctype.
  3. 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

Upvotes: 0

Ricky
Ricky

Reputation: 568

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/

Upvotes: 0

P. Frank
P. Frank

Reputation: 5745

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

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Change this line

var formData = new FormData(this);

to 

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

Upvotes: 1

Related Questions