How to send input file data value using ajax to a php page

Question

What I want to do is whenever a user selects a picture and click the button it will move the image to a specific folder and save the link to the database user_image column.<

Answer 1

    <input type='file' id="imageInput" name="imageInput" accept="image/*" />
    <button  id="changePicture" name="changePicture">Submit</button>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    $("#changePicture").click(function(){

            var file_name=$("#imageInput").val();
            var fileName = $("#imageInput").val();
            var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1); 


            var base_url = 'Oppa/view/photo.php';

            var file_data=$("#imageInput").prop("files")[0];



            var form_data=new FormData();
            form_data.append("file",file_data);
            $.ajax({
            type:"POST",
            url: base_url,
            datatype:'script',
            cache:false,
            contentType:false,
            processData:false,
            data:form_data,
            success:function(){
            //------------
            },
            error:function(){
            //----------
            }


                });


            $("#imageInput").val('');


            })


    </script>




<?php
include_once('../dbc/database.php');

$db = new Connection();
$db = $db->dbConnect();
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);


$email = isset($_POST['email']) ? $_POST['email'] : "";

$image = addslashes(file_get_contents($_FILES['file']['tmp_name']));
$image_name = addslashes($_FILES['file']['name']);
$image_size = getimagesize($_FILES['file']['tmp_name']);

move_uploaded_file($_FILES["file"]["tmp_name"], "Oppa/upload/" . $_FILES["file"]["name"]);
$location = "Oppa/upload/" . $_FILES["file"]["name"];


if(!empty($_POST['email'])) {

        $q = "UPDATE tbl_user SET user_image = '$location' WHERE user_email= :email ";
        $query = $db->prepare($q);
        $query->bindParam(':email', $email);
        $results = $query->execute();
        echo "1";
}

?>

don't forget to like my ans :)

Answer 2

jQuery("#changePicture").click(function(){

    var file_name=jQuery("#imageInput").val();
    var fileName = jQuery("#imageInput").val();
    var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1); 


    var base_url = 'Oppa/view/photo.php';

    var file_data=jQuery("#imageInput").prop("files")[0];



    var form_data=new FormData();
    form_data.append("file",file_data);
    jQuery.ajax({
    type:"POST",
    url: base_url,
    datatype:'script',
    cache:false,
    contentType:false,
    processData:false,
    data:form_data,
    success:function(){
    //------------
    },
    error:function(){
    //----------
    }


        });


    jQuery("#imageInput").val('');


    })

i hope this would help for you n don't forget to like my ans

Answer 3

try this,

var data= false;
if (window.FormData) {
     data= new FormData();
}
    var email = $('#email').val();

if (formdata) {
    data.append("image", $('input[type=file]')[0].files[0]);
    data.append("email","+email+");
    data.append("fileName",$('input[type=file]')[0].files[0].name);
 }

 if (data) {
          jQuery.ajax({
                    url: "php/upload.php",
                    type: "POST",
                    data: data,//Now you attached form datas with filename also,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                       alert("Response  Data : "+data);
                    }
                });
            }

Answer 4

Take a look at this http://malsup.com/jquery/form/#ajaxSubmit.

Include that plugin jquery.form.js and then try this.

$('#FormID').ajaxSubmit({ //FormID - id of the form.
        type: "POST",
        url: "Oppa/view/photo.php",
        data: $('#FormID').serialize(),
        cache: false,
        success: function (response) {

        if (Number(response) == 1)
            {
               $("#dialog-confirm-changedImage").dialog("open");
            }
        }
    });

This should work. I'm using it for ajax image upload.

Thanks.