PHP Ajax images and file upload script

PHP Ajax upload for images and files scripts





<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">



$(document).ready(function() {

$("#loading")

.ajaxStart(function(){

$(this).show();

})

.ajaxComplete(function(){

$(this).hide();

});

var options = {

beforeSubmit: showRequest,

success: showResponse,

url: 'upload4jquery.php', // your upload script

dataType: 'json'

};

$('#Form1').submit(function() {

document.getElementById('message').innerHTML = '';

$(this).ajaxSubmit(options);

return false;

});

});



function showRequest(formData, jqForm, options) {

var fileToUploadValue = $('input[@name=fileToUpload]').fieldValue();

if (!fileToUploadValue[0]) {

document.getElementById('message').innerHTML = 'Please select a file.';

return false;

}



return true;

}



function showResponse(data, statusText) {

if (statusText == 'success') {

if (data.img != '') {

document.getElementById('result').innerHTML = '<img

src="/upload/thumb/'+data.img+'" />';

document.getElementById('message').innerHTML = data.error;

} else {

document.getElementById('message').innerHTML = data.error;

}

} else {

document.getElementById('message').innerHTML = 'Unknown error!';

}

}



</script>



Next create a PHP script named "upload4jquery.php" and place it in the

same directory where the other files are located. Place this code into

your PHP file:



<?php

include($_SERVER['DOCUMENT_ROOT'].'/classes/upload/foto_upload_script.php');



$foto_upload = new Foto_upload;



$json['size'] = $_POST['MAX_FILE_SIZE'];

$json['img'] = '';



$foto_upload->upload_dir = $_SERVER['DOCUMENT_ROOT']."/upload/";

$foto_upload->foto_folder = $_SERVER['DOCUMENT_ROOT']."/upload/";

$foto_upload->thumb_folder = $_SERVER['DOCUMENT_ROOT']."/upload/thumb/";

$foto_upload->extensions = array(".jpg", ".gif", ".png");

$foto_upload->language = "en";

$foto_upload->x_max_size = 480;

$foto_upload->y_max_size = 360;

$foto_upload->x_max_thumb_size = 120;

$foto_upload->y_max_thumb_size = 120;



$foto_upload->the_temp_file = $_FILES['fileToUpload']['tmp_name'];

$foto_upload->the_file = $_FILES['fileToUpload']['name'];

$foto_upload->http_error = $_FILES['fileToUpload']['error'];

$foto_upload->rename_file = true;



if ($foto_upload->upload()) {

$foto_upload->process_image(false, true, true, 80);

$json['img'] = $foto_upload->file_copy;

}



$json['error'] = strip_tags($foto_upload->show_error_string());

echo json_encode($json);

?>



This tutorial or guide is not about how to use the PHP upload class.

If you never used the class before, than try the example files first

and try than the Ajax upload form.

Paths and upload directories



You need to create two upload directories: One for the upload main

file and one for the thumbnails. Check/change the permission for the

directories (CHMOD the directories with 0755). If you use the same

structure as suggested in the PHP class file, there is no need to

change the includes at the top of the PHP script.



Now we need to create the form HTML and some other containers where

the response data will be placed.



<form id="Form1" name="Form1" method="post" action="">

<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo

$max_size; ?>" />

Select an image from your hard disk:



<div>

<input type="file" name="fileToUpload" id="fileToUpload" size="18" />

<input type="Submit" value="Submit" id="buttonForm" />

</div>

</form>

<img id="loading" src="loading.gif" style="display:none;" />



<p id="message">



<p id="result">



The file loading.gif is the upload indicator image, pick the file I've

used on the demo page or check Google for other stylish images or use

an online image generator.



Some final note, the code works as it is. Don't change variable names

or form field attributes, if you're not sure how to change them inside

your JavaScript code.





Requote by



Hery Purnama (Freelance IT Trainer)

081223344506

Jakarta, Bandung, Yogya, Bali