Web Programming: Previewing about to be uploaded Image

Image upload & preview without page refresh

August 13, 2009

File upload without refresh:

If you want to have preview option while selecting the file from your local machine, The below two scripts will helps to achieve your requirement. You can find the form in “index.html” file. When you selects any file it will call JS function “ajaxFileUpload”. Inside of this function we have set form target to iframe.

upload-picture.php acts as a action page. You can see the uploading stuff over there. You can also find the virus scanning(clamscan) in this file.

File 1: index.html

function ajaxFileUpload(upload_field)
// Checking file type
var re_text = /\.jpg|\.gif|\.jpeg/i;
var filename = upload_field.value;
if (filename.search(re_text) == -1) {
alert("File should be either jpg or gif or jpeg");
return false;
document.getElementById('picture_preview').innerHTML = '<div><img src="images/progressbar.gif" border="0" /></div>';
upload_field.form.action = 'upload-picture.php';
upload_field.form.target = 'upload_iframe';
upload_field.form.action = '';
upload_field.form.target = '';
return true;

<!-- iframe used for ajax file upload-->
<!-- debug: change it to style="display:block" -->
<iframe name="upload_iframe" id="upload_iframe" style="display:none;"></iframe>
<!-- iframe used for ajax file upload-->

<form name="pictureForm" method="post" autocomplete="off" enctype="multipart/form-data">
<span>Upload Picture :</span>
<input type="file" name="picture" id="picture" onchange="return ajaxFileUpload(this);" />
<span id="picture_error"></span>
<div id="picture_preview"></div>

File 2: upload-picture.php

$upload_dir = '/var/www/file-upload/upload/'; // Directory for file storing
$preview_url = 'http://localhost/file-upload/upload/';
$filename= '';
$result = 'ERROR';
$result_msg = '';
$allowed_image = array ('image/gif', 'image/jpeg', 'image/jpg', 'image/pjpeg','image/png');
define('PICTURE_SIZE_ALLOWED', 2242880); // bytes

if (isset($_FILES['picture']))  // file was send from browser
 if ($_FILES['picture']['error'] == UPLOAD_ERR_OK)  // no error
 if (in_array($_FILES['picture']['type'], $allowed_image)) {
 if(filesize($_FILES['picture']['tmp_name']) <= PICTURE_SIZE_ALLOWED) // bytes
 $filename = $_FILES['picture']['name'];
 move_uploaded_file($_FILES['picture']['tmp_name'], $upload_dir.$filename);

//phpclamav clamscan for scanning viruses
//passthru('clamscan -d /var/lib/clamav --no-summary '.$upload_dir.$filename, $virus_msg); //scan virus
$virus_msg = 'OK'; //assume clamav returing OK.
if ($virus_msg != 'OK') {
$result_msg = $filename." : ".FILE_VIRUS_AFFECTED;
$result_msg = '<font color=red>'.$result_msg.'</font>';
$filename = '';
}else {
// main action -- move uploaded file to $upload_dir
$result = 'OK';
}else {
$filesize = filesize($_FILES['picture']['tmp_name']);// or $_FILES['picture']['size']
$filetype = $_FILES['picture']['type'];
$result_msg = PICTURE_SIZE;
}else {
$result_msg = SELECT_IMAGE;
elseif ($_FILES['picture']['error'] == UPLOAD_ERR_INI_SIZE)
$result_msg = 'The uploaded file exceeds the upload_max_filesize directive in php.ini';
$result_msg = 'Unknown error';

// This is a PHP code outputing Javascript code.
echo '<script language="JavaScript" type="text/javascript">'."\n";
echo 'var parDoc = window.parent.document;';
if ($result == 'OK') {
echo 'parDoc.getElementById("picture_error").innerHTML =  "";';
else {
echo "parDoc.getElementById('picture_error').innerHTML = '".$result_msg."';";

if($filename != '') {
echo "parDoc.getElementById('picture_preview').innerHTML = '<img src=\'$preview_url$filename\' id=\'preview_picture_tag\' name=\'preview_picture_tag\' />';";

echo "\n".'</script>';
exit(); // do not go futher


1. Make sure that the upload directory having the permission.
2. To debug, you need to change the style=”display:block” in iframe tag.

Source: http://web4us.wordpress.com/2009/08/13/image-upload-preview-without-page-refresh

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s