My Information: 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);
?>

My Information

Pages

Thursday, 23 February 2017

Pretty Ajax Image Upload Example jquery and php

No comments:

Post a Comment