AJAX HTML Javascript jQuery PHP Example MORE Videos New

How to Upload file using ajax, jQuery, PHP and MySQl

❮ Previous Next ❯

index.php

    <!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Ajax File Upload with jQuery and PHP</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">

<div class="col-md-8">

<h1><a href="#" target="_blank"><img src="logo.png" width="80px"/>Ajax File Uploading with Database MySql</a></h1>
<hr> 
<input id="uploadImage" type="file" accept="image/*" name="image" class="uploadimg"/>
<input id="uploadImage1" type="file" accept="image/*" name="image1" class="uploadimg" />

<div id="err"></div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
    $('.uploadimg').on('change', function() {
        console.log("test");
    var file_data = $(this).prop('files')[0];   
    var form_data = new FormData();
    var ext = $(this).val().split('.').pop().toLowerCase();
    if ($.inArray(ext, ['png','jpg','jpeg']) == -1)   {
        alert("only jpg and png images allowed");
        return;
    }  
    var picsize = (file_data.size);
    console.log(picsize); /*in byte*/
    if(picsize > 2097152) /* 2mb*/
        {
            alert("Image allowd less than 2 mb")
            return;
        }
    form_data.append('file', file_data);   
    $.ajax({
        url: 'upload.php', /*point to server-side PHP script */
        dataType: 'text',  /* what to expect back from the PHP script, if anything*/
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(res){
           console.log(res);
        }
     });
});
})

</script>
</body></html>

upload.php

    <?php
$valid_extensions = array('jpeg', 'jpg','png'); 

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
       
        $code=mt_rand(10,100000);/* rename the file name*/
        $size= $_FILES['file']['size'];
        $ext = strtolower(pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION));
        if($size > 2097152) /*2 mb 1024*1024 bytes*/
        {
            echo json_encode(array("statusCode"=>400,'msg'=>"Image allowd less than 2 mb"));
        }
        else if(!in_array($ext, $valid_extensions)) {
            echo json_encode(array("statusCode"=>400,'msg'=>$ext.' not allowed'));
        }
        else{
           
            $result = move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $code.'.'.$ext);
            echo json_encode(array("statusCode"=>200 ,'code'=>$code));
        }
        
    }
?>

AJAX Insert Data

AJAX Insert Multiple Data

AJAX PHP View

AJAX PHP Update

AJAX PHP Delete

AJAX CRUD Example

AJAX Delete Multiple

AJAX Login Signup

AJAX Login OTP

AJAX Serialize

AJAX Array Data

❮ Previous Next ❯