Uploading Image to database in php & ajax

Question

I am trying to upload an image to database from html page in a form in a modal through php & ajax,but it doesn't work i don't know why,anyone can help me?

HTML Page

<form method="post" enctype="multipart/form-data">
    <div class="row">
      <div class="col-sm-4">
        <label class="Modallabel">Photo:</label>
      </div>
      <div class="col-sm-8">
        <div class="input-group input-group-sm" style="margin-top: -5px;">
            <input type="file" id="fileUpload" name="fileUpload" style="color: #ffffff;"/>
        </div><br>
      </div>
    </div>
</form>
<button type="button" class="btn btn-success btn-md" style="margin:0;width: 75px;" onclick="AddNewCustomer()">Add</button>

Javascript Function

function AddNewCustomer()
{
//Image upload
$(document).ready(function() 
{
    $(document).on('change', '#fileUpload', function() //NOT WORKING HERE
    {
        var property = document.getElementById("fileUpload").files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();
        if (jQuery.inArray(image_extension, ['gif','png','jpg','jpeg']) == -1)
        {
            alert("invalid Image File");
        }
        var image_size = property.size;
        if(image_size > 2000000)
        {
            alert("Image File Size is very big");
        }
        else
        {
            var form_data = new FormData();
            form_data.append("fileUpload", property);

            $.ajax
            ({
                type:"POST",
                url:"addNewCustomer.php",
                processData: false,
                cache: false,
                contentType: false,
                data:
                    {
                    'form_data':form_data
                    },
                success: function(data){
                    if (data == "Success!")
                    {
                        sweetAlert("Data entered successfully!");
                    }
                    else if(data == "Exist") 
                    {
                        sweetAlert("","Customer already exists!","error");
                        return false;
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log('ERROR', textStatus, errorThrown);
                }
            })
        }
    })
})

}

doesn't work is not enough to understand what is going on , 2nd: where is your php code? — Mohamed-Yousef
– Mohamed-Yousef, Commented May 23, 2017 at 21:04
it means that the code doesn't enter to run the next code between parentheses. — NewDeveloper
– NewDeveloper, Commented May 23, 2017 at 21:07

guest271314 · Accepted Answer · 2017-05-23 21:07:08Z

1

change event would be attached after click at <button> at onclick="AddNewCustomer().

You can remove AddNewCustomer function and call change on #fileUpload element at click of .btn element.

$(document).ready(function() {
  $(document).on('change', '#fileUpload', function() {//do stuff})

  $(".btn").on("click", function() {
    $("#fileUpload").trigger("change");
  });
});

answered May 23, 2017 at 21:07

guest271314

1

Sign up to request clarification or add additional context in comments.

4 Comments

NewDeveloper Over a year ago

The form has another inputs (First Name,Last Name,Email,...Photo) that's why i have to have the function AddNewCustomer

guest271314 Over a year ago

@NewDeveloper What is purpose of click event at .btn element?

NewDeveloper Over a year ago

The purpose is to add the customer data in the database(Name,Phone,Emai,....Photo)

guest271314 Over a year ago

@NewDeveloper Does approach at Answer not produce expected result?

helllomatt · Accepted Answer · 2017-05-23 21:07:23Z

0

You want to upload the image immediately after it's chosen, but you only run the function when the 'Add' button is clicked.

You need to take your change code out of the function, or invoke the function when the page is loaded to add the listeners to the form.

answered May 23, 2017 at 21:07

helllomatt

1,3498 silver badges16 bronze badges

Collectives™ on Stack Overflow

Uploading Image to database in php & ajax

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related