Upload images with ajax-php (Part 1/2)
Well you want to create a form in that a user can upload one or more photos - images.
The user will be able to upload an image from his computer without refreshing the page. Also he can delete so that he will put another one. After a successful uploding a small preview will be presented.
The user will be limited to the number of 3 images atmost. Also only jpeg images of 100Kb size. Of course these are parameters that the programmer can change but it is good to have the control of all these. And don't forget the security issues that come with uploading files to your server. Allways examine the header of the file so that you can be sure.
All the above requirements meet to the following nice solution
You will need 4 php files for all the functions desired
-post_product.php
-upload-file-index.php
-delete-file.php
-upload-file.php
1. Create in the main form page (i.e. post_product.php) an iframe. In this iframe you will have the basic form for the uploading of the images.
// This is the upload - post product page for the site
<span> <b>Product Fotos</b> (up to 3) <span>
<iframe src="upload-file-index.php" frameborder="0"></iframe>
2. Create the upload-file-index.php that is refered in the iframe
<?php
session_start(); // start up your PHP session!
//if (!isset($_SESSION['image_counter']))
$_SESSION['image_counter'] = 0;?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="./js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="./js/ajaxupload.3.5.js" ></script>
<style type="text/css">
#upload{
margin:30px 200px; padding:15px;
font-weight:bold; font-size:1.3em;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
background:#f2f2f2;
color:#3366cc;
border:1px solid #ccc;
width:150px;
cursor:pointer !important;
-moz-border-radius:5px; -webkit-border-radius:5px;
}
.darkbg{
background:#ddd !important;
}
#status{
font-family:Arial; padding:5px;
}
ul#files{ list-style:none; padding:0; margin:0; }
ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px;}
ul#files li img{ max-width:180px; max-height:150px; }
.success{ background:#99f099; border:1px solid #339933; }
.error{ background:#f0c6c3; border:1px solid #cc6622; }
</style>
<script type="text/javascript" >
function delete_image(image_id,image_name)
{
alert ('node to delete =' image_id);
var files_ul = document.getElementById('files');
var imgdiv = document.getElementById(image_name);
files_ul.removeChild(imgdiv);
var dataString = 'name=' image_name '&id=' image_id;
var url = 'delete-file.php'; // Call Delete Page & In this page delete those image & db entry
$.ajax({url:"delete-file.php",
type: "POST",
data:dataString,
success: function(html) {
if(html == "error")
{
alert('%u0397 %u03B5%u03B9%u03BA%u03CC%u03BD%u03B1 %u03B4%u03B5%u03BD %u03B4%u03B9%u03B1%u03B3%u03C1%u03AC%u03C6%u03B7%u03BA%u03B5');
}
}
});
return false;
}
$(function(){
var btnUpload=$('#upload');
var lnkDelete=$('#link');
var status=$('#status');
new AjaxUpload(btnUpload, {
action: 'upload-file.php',
name: 'upload-image',
onSubmit: function(file, ext){
if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){
// extension is not allowed
status.text('%u0397 %u03B5%u03B9%u03BA%u03CC%u03BD%u03B1 %u03C3%u03B1%u03C2 %u03C0%u03C1%u03AD%u03C0%u03B5%u03B9 %u03BD%u03B1 %u03B5%u03AF%u03BD%u03B1%u03B9: JPG, PNG %u03AE GIF');
return false;
}
status.text('Uploading...');
},
onComplete: function(file, response){
//On completion clear the status
status.text('');
//Add uploaded file to list
//var response1 = response.responseXML.documentElement;
var result_flag = $(response).find('result') ;
if(result_flag.text() == "success")
{
var sessionId = $(response).find('sessionId');
var new_fileName = $(response).find('fileName');
var link = document.createElement("a");
link.setAttribute("href", "#");
link.onclick = function() { delete_image(sessionId.text(),new_fileName.text()); return false; };
link.innerHTML = "%u0391%u03C6%u03B1%u03AF%u03C1%u03B5%u03C3%u03B7";
$('<li id=' new_fileName.text() '></li>').appendTo('#files').html('<img src="./images/prods/' new_fileName.text() '" alt="" /><br />' file).append(link).addClass('success');
}
else
{ var reason = $(response).find('reason');
if(reason.text() == "file_size")
$('<li></li>').appendTo('#files').text("%u0397 %u03B5%u03B9%u03BA%u03CC%u03BD%u03B1 %u03B5%u03AF%u03BD%u03B1%u03B9 %u03C0%u03BF%u03BB%u03CD %u03BC%u03B5%u03B3%u03AC%u03BB%u03B7").addClass('error');
else if(reason.text() == "notJPG")
$('<li></li>').appendTo('#files').text("%u039C%u03C0%u03BF%u03C1%u03B5%u03AF%u03C4%u03B5 %u03BD%u03B1 %u03B1%u03BD%u03B5%u03B2%u03AC%u03C3%u03B5%u03C4%u03B5 %u03BC%u03CC%u03BD%u03BF %u03B5%u03B9%u03BA%u03CC%u03BD%u03B5%u03C2 %u03C4%u03CD%u03C0%u03BF%u03C5 JPG").addClass('error');
else
$('<li></li>').appendTo('#files').text(file).addClass('error');
}
}
});
});
</script>
</head>
<body>
<div id="mainbody" >
<div id="upload" ><span>%u0391%u03BD%u03AD%u03B2%u03B1%u03C3%u03B5 %u03C6%u03C9%u03C4%u03BF%u03B3%u03C1%u03B1%u03C6%u03AF%u03B1<span></div><span id="status" ></span>
<ul id="files" >
<?php
$txt="";
if(isset($_SESSION['image1']))
$txt = $txt.'<li id="'.$_SESSION['image1'].'" class="success"><img alt="" src="./images/prods/'.$_SESSION['image1'].'"><br>'.$_SESSION['image1'].'<a href="#" onclick="javascript:delete_image(1,'."'".$_SESSION['image1']."'".');return false">%u0391%u03C6%u03B1%u03AF%u03C1%u03B5%u03C3%u03B7</a></li>';
if(isset($_SESSION['image2']))
$txt = $txt.'<li id="'.$_SESSION['image2'].'" class="success"><img alt="" src="./images/prods/'.$_SESSION['image2'].'"><br>'.$_SESSION['image2'].'<a href="#" onclick="javascript:delete_image(2,'."'".$_SESSION['image2']."'".');return false">%u0391%u03C6%u03B1%u03AF%u03C1%u03B5%u03C3%u03B7</a></li>';
if(isset($_SESSION['image3']))
$txt = $txt.'<li id="'.$_SESSION['image3'].'" class="success"><img alt="" src="./images/prods/'.$_SESSION['image3'].'"><br>'.$_SESSION['image3'].'<a href="#" onclick="javascript:delete_image(3,'."'".$_SESSION['image3']."'".');return false">%u0391%u03C6%u03B1%u03AF%u03C1%u03B5%u03C3%u03B7</a></li>';
echo $txt;?>
</ul>
</div>
</body>
As you can see in the beginnig of the file there are 2 functions
1. delete_image (for deleting an uploaded image). The source code for this function is in the file delete-file.php
2. an ajax function to upload the image. The source code for this fuction is in the file upload-file.php.
We will continue with these 2 files in the second part.
To get all the necessary source files go to: https://github.com/alexopoulos7/Upload-image-ajax
Σχόλια