ajax image upload with form data in jquery and php

ajax image upload with form data in jquery and php

Hello Here example how to image upload using ajax using php.

and also know how to another value in ajax request.

ajax image upload with form data in jquery and php. please check below example to pass ajax data pass in jquery.

ajax image upload with form data in jquery and php

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="application/javascript">
$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();

        var formData = new FormData();
var text = $('input[type=text]').val();

formData.append('image', $('input[type=file]')[0].files[0]);
formData.append('test', text);


        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
$('#imageUploadForm')[0].reset();
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});
</script>
<form name="photo" id="imageUploadForm" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post">
    <input type="file" id="ImageBrowse"  name="image" size="30"/>
     <input type="text" id="text"  value="nice man" name="text" size="30"/>
    <input type="submit" name="upload" value="Upload" />
   
</form>
<?php
if(isset($_FILES['image'])){
if(!is_dir('ajax_image')){
mkdir('ajax_image');
}
echo "GET TEXT BOX VALUE = ".$_POST['test'];
$path = $_FILES['image']['tmp_name'];
$new = "ajax_image/".uniqid().$_FILES['image']['name'];
move_uploaded_file($path,$new);
}
 ?>

ajax image upload with form data in jquery and php