The JavaScript script presented in this page can be used to display image file in canvas before upload, checking also the file type extension, and image size (width /height) in browser, on client side (without using Ajax to upload the image).
- To set the maximum allowed width and height, change the values of the max_size variable (default 800/600).
 
- This script Does Not upload the image file on server, it just checks the file type and the image sizes in browser, and displays it inside canvas.
To upload the file on server you have to send the form data to a server-side script, see this: Simple PHP Upload Script.

Script Code

- Click on the code to select it.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Display image file in Canvas and Check its type and size before Upload</title>
<style>
html, body {text-align:center;}
#cnv1 {
 display: block;
 margin: 1em auto;
 background: #fdfdfd;
 border: 1px solid blue;
}
#pic1 {
 font-weight: 700;
 font-size: 18px;
}
</style>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
 <input type="file" name="file_up" id="file_up" /><br><br>
 <input type="submit" value="Upload" id="sbm1">
 <div id="pic1"></div>
</form>
<canvas width="800" height="600" id="cnv1"></canvas>

<script>
var allow_type = ['gif', 'jpg', 'jpe', 'jpeg', 'png']; // allowed images type
var max_size = {width:800, height:600}; // maximum allowed width and height for image to upload

 /* Script to Add image file in Canvas and to check it before Upload (from: https://coursesweb.net/ ) */
var file_up = document.getElementById('file_up'); // input element with file for upload
var cnv1 = document.getElementById('cnv1'); // get the canvas element

// check the extension type; if file-extension in allow_type return true, otherwise false
// file is a string with file path and name
function checkExt(file) {
 var ext = file.substring(file.lastIndexOf('.') + 1).toLowerCase();
 var re = false;
 for(var i=0; i<allow_type.length; i++) {
 if(ext == allow_type[i].toLowerCase()) { re = true; break; }
 }
 return re;
}

// to clear the canvas
function clearCanvas() {
 var ctx = cnv1.getContext('2d'); // gets reference to canvas context
 ctx.beginPath(); // clear existing drawing paths
 ctx.save(); // store the current transformation matrix

 // Use the identity matrix while clearing the canvas
 ctx.setTransform(1, 0, 0, 1, 0, 0);
 ctx.clearRect(0, 0, cnv1.width, cnv1.height);

 ctx.restore(); // restore the transform
}

// add image img_elm in canvas
function addImgCnv(img_elm) {
 if(cnv1.getContext) {
 var ctx = cnv1.getContext('2d');

 // get a reference to the image, then add it in canvas context
 ctx.drawImage(img_elm, 0, 0, img_elm.width, img_elm.height);
 }
}

// register onchange event to #file_up
file_up.addEventListener('change', function(){
 document.getElementById('sbm1').setAttribute('disabled', 'disabled'); // disable the submit button
 clearCanvas(); // clear the canvas context

 // check the file type (extension)
 if (this.files && this.files[0]&& checkExt(this.value)) {
 // create <img> with a blob-url address of the "file", made with createObjectURL()
 // Generated URL will be like: blob:http://localhost/7514bc74-65d4-4cf0-a0df-3de016824345
 document.getElementById('pic1').innerHTML = 'LOADING...<img src="' + window.URL.createObjectURL(this.files[0]) + '" alt="Image" id="img1" style="display:none" />';
 
 // after the image is loaded
 document.getElementById('img1').onload = function(){
 // check allowed image width /height
 var img1 = document.getElementById('img1');
 if(img1.width <= max_size.width && img1.height <= max_size.height) {
 addImgCnv(img1); // add image in canvas
 document.getElementById('sbm1').removeAttribute('disabled'); // enable the submit button
 document.getElementById('pic1').innerHTML = file_up.value.substring(file_up.value.lastIndexOf('/') + 1).substring(file_up.value.lastIndexOf('\\') + 1) +' - Size: '+ img1.width +' / '+ img1.height;
 }
 else document.getElementById('pic1').innerHTML = 'The maximum allowed image size is: '+ max_size.width +' / '+ max_size.height;
 }
 }
 else document.getElementById('pic1').innerHTML = 'Not allowed file type';
});
</script>
</body>
</html>
- Demo (Select a file for upload).


 

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Display image file in Canvas, Check its type and size before Upload

Last accessed pages

  1. Common PHP Errors and Solutions (6867)
  2. Get visitor IP in PHP (842)
  3. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (43359)
  4. SSEP - Site Search Engine PHP-Ajax (7095)
  5. PHP Method Chaining (1706)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (697)
  2. Read Excel file data in PHP - PhpExcelReader (625)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (394)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (347)
  5. PHP getElementById and getElementsByTagName (311)