The JavaScript script from this tutorial checks automatically the name of the file which an user adds for upload.
You can add /change the list of allowed extensions in the 'ar_ext' variable.
The script separate the name and the extension of the file, adds the name in a text field and checks the extension.
If the file extension is found in the allowed list, enables the 'Submit' button, else, it deletes the value in the 'file' field, disables the Submit button, and displays an alert message.
<h4>Example Check the file type before Upload</h4>
<p>File types allowed: PDF, GIF, JPE, and JPG:</p>

<form action='upload.php' method='post' id='idf' enctype='multipart/form-data'>
 Upload file: <input type='file' name='fup' onchange="checkName(this, 'fname', 'submit')" /><br />
 File name: <input type='text' value='' name='denumire' id='fname' /><br />
 <input type='submit' id='submit' value='Submit' disabled='disabled' />
</form>

<script>
var ar_ext = ['pdf', 'gif', 'jpe', 'jpg']; // array with allowed extensions

function checkName(el, to, sbm) {
// - coursesweb.net
 // get the file name and split it to separe the extension
 var name = el.value;
 var ar_name = name.split('.');

 // for IE - separe dir paths (\) from name
 var ar_nm = ar_name[0].split('\\');
 for(var i=0; i<ar_nm.length; i++) var nm = ar_nm[i];

 // add the name in 'to'
 document.getElementById(to).value = nm;

 // check the file extension
 var re = 0;
 for(var i=0; i<ar_ext.length; i++) {
 if(ar_ext[i] == ar_name[1]) {
 re = 1;
 break;
 }
 }

 // if re is 1, the extension is in the allowed list
 if(re==1) {
 // enable submit
 document.getElementById(sbm).disabled = false;
 }
 else {
 // delete the file name, disable Submit, Alert message
 el.value = '';
 document.getElementById(sbm).disabled = true;
 alert('.'+ ar_name[1] +' is not an file type allowed for upload');
 }
}
</script>
The 'upload.php' files must contain a PHP script which will get the file and copy it on the server. Bellow is the code for 'upload.php' file.

upload.php code

<?php
// - coursesweb.net
$updir = 'uploads/'; // sets the folder where the uploaded files are copied
$max_size = 100; // sets maximum file size allowed (in KB)

// file types allowed
$allowtype = array('pdf', 'gif', 'jpg', 'jpe');

// If is received a valid file from the 'fup' form field
if (isset($_FILES['fup'])) {
 // check for errors
 if ($_FILES['fup']['error'] > 0) {
 echo 'Error: '. $_FILES['fup']['error']. '<br />';
 }
 else {
 // get the name, size (in kb) and type (the extension) of the file
 $fname = $_FILES['fup']['name'];
 $fsize = $_FILES['fup']['size'] / 1024;
 $ftype = end(explode('.', strtolower($fname)));

 // checks if the file already exists
 if (file_exists($updir. $fname)) {
 echo 'The file: '. $fname. ' already exists';
 }
 else {
 // if the file not exists, check its type (by extension) and size
 if (in_array($ftype, $allowtype)) {
 // check the size
 if ($fsize <= $max_size) {
 // uses function to copy the file from temporary folder to $updir
 if (!move_uploaded_file ($_FILES['fup']['tmp_name'], $updir. $fname)) {
 echo 'The file '. $fname. ' could not be copied, try again';
 }
 else {
 echo $fname. ' ('. $fsize. ' kb) was successfully uploaded';
 }
 }
 else {
 echo 'The file '. $fname. ' exceeds the maximum permitted size, '. $max_size. ' KB';
 }
 }
 else {
 echo $fname. ' - invalid file type';
 }
 }
 }
}
else echo 'Invalid form data';
?>

You can test the JavaScript script in the next form (file types allowed: PDF, GIF, JPE, and JPG):
Upload file:
File name:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Check the file type before Upload

Last accessed pages

  1. Working with HTML attributes in PHP (6701)
  2. XML data from ActionScript to a PHP script (1104)
  3. html2canvas - Save page screenshoot on server (1224)
  4. Laravel Middleware (136)
  5. PHP getElementById and getElementsByTagName (26285)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1976)
  2. Contact page - CoursesWeb (1924)
  3. Tabs effect with CSS (1924)
  4. Insert, Select and Update NULL value in MySQL (1228)
  5. PHP getElementById and getElementsByTagName (723)