Showing posts with label Pretty Ajax Image Upload Example jquery and php. Show all posts
Showing posts with label Pretty Ajax Image Upload Example jquery and php. Show all posts

Thursday, 23 February 2017

Pretty Ajax Image Upload Example jquery and php

Hello

Example of image upload using ajax

in we needed  bootstrap.min.css,jquery.form.js,bootstrap.min.js,jquery.form.js,jquery-1.12.4.min.js,jquery-latest.js

first display here php page

pretty.php

<head>


<title>Pretty Ajax Image Upload  Example</title>
<script
              src="https://code.jquery.com/jquery-1.12.4.min.js"
              integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
              crossorigin="anonymous"></script>
              <script src="http://code.jquery.com/jquery-latest.js"/></script>
              <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.js"></script>
      
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script type="application/javascript">
$(document).ready(function(e) {
  
    $("#kichen_image_upload_link").click(function() {
        //alert();
        $("#kichen_image_upload_file").trigger('click');
    });

  
function onsuccess(response, status) {

        var result = $.parseJSON(response);
        //alert(result['message']);

        if (result['message'] == "sucess") {
            var imagepath = result['imagename'];
            $("ul.kichen_image_upload li:last").before('<li><a href="#"><img style="height:75px;width:75px;" src="' + imagepath + '" alt="Kitchen"></a></li>');
          
        var images_name =     $('input[name=hidden_kichen_select_image]').val();
      
        if(images_name!=''){
        var get_image = images_name+','+result['imagepath'];
        }else{
            var get_image = result['imagepath'];
        }
        $('input[name=hidden_kichen_select_image]').val(get_image);
      
        } else if (result['message'] == "images") {
            alert('Please select image only');
        } else if (result['message'] == "login") {
            alert('Please login as seller');
        }

        //$("#onsuccessmsg").html("Status :<b>"+status+'</b><br><br>Response Data :<div id="msg" style="border:5px solid #CCC;padding:15px;">'+response+'</div>');
    }

    $("#kichen_image_upload_file").change(function() {
        $("#kichen_image_upload_form").submit();


    });

    $("#kichen_image_upload_form").on('submit', function() {
        var options = {
            url: $(this).attr("action"),
            success: onsuccess
        };
        $(this).ajaxSubmit(options);
        return false;
    });
 });
</script>
<style>
ul li{
    margin:5px;
}
</style>
</head>

<body>

<ul class="kichen_image_upload" style="list-style:none;display:inline-flex;margin:10px;">
                    <li> <a id="kichen_image_upload_link" href="#"> <img src="kitchen5.jpg" alt="image"></a>
                      <form method="POST" action="image_upload.php" id="kichen_image_upload_form">
                        <input style="display:none;" type="file" id="kichen_image_upload_file" name="kichen_image_upload_file"/>
                        <input type="hidden" name="hidden_kichen_select_image"/>
                      </form>
                    </li>
                  </ul>

</body>


after in this ajax request file name is image_upload.php

$file = $_FILES['kichen_image_upload_file']['tmp_name'];
if (file_exists($file))
    {
        $file = $_FILES['kichen_image_upload_file']['tmp_name'];
        $imagesizedata = getimagesize($file);
        if ($imagesizedata === FALSE)
        {
            //not image
            $data['message'] = "images";
        }
        else
        {
       
           
            $full_path = "image/";
           
            if(!is_dir($full_path)){
                mkdir($full_path, 0777, true);
            }
            $path = $_FILES['kichen_image_upload_file']['tmp_name'];
           
            $image_name = $full_path.preg_replace( "/[^a-z0-9\._]+/", "-", strtolower($_FILES['kichen_image_upload_file']['name']) );
            move_uploaded_file($path,$image_name);
           
            $data['message'] ="sucess";
            $data['imagename'] =$image_name;
            $data['imagepath'] =$image_name;
           
            //print_r($imagesizedata);
            //image
            //use $imagesizedata to get extra info
        }
    }
    else
    {
        //not file
        $data['message'] = "images";
    }
    echo json_encode($data);
?>