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);
?>
