AJAX HTML Javascript jQuery PHP Example MORE Videos New

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


    <!doctype 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">
<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>
<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>
    $('.uploadimg').on('change', function() {
    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");
    var picsize = (file_data.size);
    console.log(picsize); /*in byte*/
    if(picsize > 2097152) /* 2mb*/
            alert("Image allowd less than 2 mb")
    form_data.append('file', file_data);   
        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){



$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'));
            $result = move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $code.'.'.$ext);
            echo json_encode(array("statusCode"=>200 ,'code'=>$code));