Chat or leave a message for the other users
<!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).
<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />
#id {
font-style: italic;
}$(document).ready(function() {
$(".a_class").click(function(){ $(this).hide("slow"); });
});function fname($a, $b) {
echo $a * $b;
}