AJAX file upload example.Tools used
JQuery - jquery-1.7.1.min.js
ajaxupload.js - You can find that file here. https://github.com/valums/ajax-upload
ajaxupload.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX upload - codesstore.blogspot.com</title>
<script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="javascript/ajaxupload.js"></script>
</head>
<body>
<img name="profile_image" id="profile_image" alt="picture" src="" width="235" height="250" /> <br />
<input type="button" value="Upload Image" id="picture" class="picture" />
<div class="uploading"></div>
<input type="hidden" name="photo_file" id="photo_file" />
<script type="text/javascript">
<!--
new AjaxUpload('#picture', {
action: 'ajaxupload_backend.php',
name: 'file',
autoSubmit: true,
responseType: 'json',
onSubmit: function(file, extension) {
$('.uploading').html('<img src="images/loading.gif" class="loading" />');
$('#picture').attr('disabled', true);
},
onComplete: function(file, json) {
$('#picture').attr('disabled', false);
$('.error').remove();
if (json['success']) {
$('#profile_image').attr('src', json['file']);
$('#photo_file').val(json['photo_file']);
}
if (json['error']) {
alert(json['error']);
}
$('.loading').remove();
}
});
//-->
</script>
</body>
</html>
ajaxupload_backend.php
Here is the backend file. Added some size and file type validations.Uploaded files will store the UPLOAD_DIR dierectory.
<?php
define('UPLOAD_DIR', 'C:/wamp/www/ajaxupload/uploads/');
define('UPLOAD_HTTP', 'http://localhost/ajaxupload/uploads/');
$json = array();
if (!empty($_FILES['file']['name'])) {
$filename = basename(preg_replace('/[^a-zA-Z0-9\.\-\s+]/', '', html_entity_decode($_FILES['file']['name'], ENT_QUOTES, 'UTF-8')));
if($_FILES['file']['size'] > (1000*1024)){
$json['error'] = "File too large. Max file size : 1MB";
}
list($width, $height, $type, $attr) = getimagesize($_FILES['file']['tmp_name']);
$dimension_eror='';
$min_width = 800;
$min_height = 600;
if($width < $min_width ){
$dimension_eror .= 'Image width is too small';
}
if($height < $min_height ){
$dimension_eror .= 'Image height is too small';
}
if($width < $min_width && $height < $min_height){
$dimension_eror = 'Image width and height too small';
}
if($dimension_eror != ''){
$json['error'] = $dimension_eror;
}
$allowed = array('JPG','JPEG','jpg','jpeg');
if (!in_array(substr(strrchr($filename, '.'), 1), $allowed)) {
$json['error'] = 'Allow file type: JPG';
}
if ($_FILES['file']['error'] != UPLOAD_ERR_OK) {
$json['error'] = $_FILES['file']['error'];
}
} else {
$json['error'] = 'Upload Failed';
}
if (!$json) {
if (is_uploaded_file($_FILES['file']['tmp_name']) && file_exists($_FILES['file']['tmp_name'])) {
$file = time().generateRandomString().basename($filename);
move_uploaded_file($_FILES['file']['tmp_name'], UPLOAD_DIR . $file);
$json['file'] =UPLOAD_HTTP. $file;
$json['photo_file'] = $file;
}
$json['success'] = 'Successfuly uploaded';
}
echo json_encode($json);
function generateRandomString($length = 6){
$string = "";
$possibleCharactors = "2346789abcdfghjkmnpqrtvwxyzABCDEFGHJKLMNPQRTUVWYZ";
$maxlength = strlen($possibleCharactors);
if ($length > $maxlength) {
$length = $maxlength;
}
$i = 0;
while ($i < $length) {
$char = substr($possibleCharactors, mt_rand(0, $maxlength-1), 1);
if (!strstr($string, $char)) {
$string .= $char;
$i++;
}
}
return $string;
}
?>
Directory structure in Eclipse
No comments:
Post a Comment