We Keep Coding

Asynchronous file uploading working (in fact not working) differently in different browsers

I am testing line by line resizing and uploading files within a form client-side.
There is a button to select a file, javascript throws an alert about image attributes, resizes the image, assigns it to a hidden field and posts the form. I started with a single image and the relevant code is:
HTML
<form action="add2.php" method="post" enctype="multipart/form-data" id="addform">
<input type="file" id="i1_file" onchange="resize('i1_file', 'addform')" />
<input type="hidden" name="uploadfile" id="image1" value="" />
Javascript
function resize(inputid, formid)
{
var inpFiles = document.getElementById(inputid);
var file = inpFiles.files[0];
... Initial file checks here: type, size etc...
var dataurl = null;
// create <img> element
var img = document.createElement("img");
var reader = new FileReader();
var image = document.getElementById('image1');
// document.write("Before image1 :" + image.name + "<br />");
reader.onloadend = function(e) {
img.src = e.target.result;
img.onload = function() {
// Once you have the image preview in an <img> element, you can draw this image in a <canvas> element to pre-process the file.
var canvas = document.createElement("canvas");
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
var width = img.width;
var height = img.height;
//document.write("src " + img.src + "<br />");
document.write("width " + img.width + "<br />");
document.write("height " + img.height + "<br />");
if ((width > 1024) && (width > height))
{
var new_width = 1024;
var ratio = new_width / width;
var new_height = Math.round(height * ratio);
}
else if (height > 768)
{
var new_height = 768;
var ratio = new_height / height;
var new_width = Math.round(width * ratio);
}
else
{
var new_width = width;
var new_height = height;
}
document.write("new_height: " + new_height + "<br />");
canvas.width = new_width;
canvas.height = new_height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0,new_width, new_height);
// save canvas as dataUrl
dataurl = canvas.toDataURL("image/jpeg", 0.8);
document.write("FormData " + formid + "<br />");
//document.write("dataurl: " + dataurl + "<br />");
image.value = dataurl;
//var fd = new FormData(document.getElementById(formid));
document.write("Before FormData " + "<br />");
var fd = new FormData(document.forms["addform"]);
var xhr = new XMLHttpRequest();
document.write("Posting <br />" + xhr.readyState );
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// OK
alert('response:'+xhr.responseText);
// here you can use the result (xhr.responseText)
} else {
// not OK
alert('failure!');
}
}
};
xhr.open('POST', 'add2.php', true);
document.write("After Open <br />" + xhr.readyState);
xhr.setRequestHeader("Content-type","multipart/form-data");
document.write("Before Send <br />" );
xhr.send(fd);
console.log(xhr.response);
} //onload
}
reader.readAsDataURL(file);
}
The first browser was Firefox and it hangs after producing this output (i.e. up to xhr.open):
width 4176
height 3120
new_height: 765
FormData addform
Before FormData
Posting
0
Chrome did not redirect at all and stayed on the same page where the form was.
IE10 only output "width 4176" (the very first debugging print).
Can anyone spot what I am doing wrong and why the behaviour is so different in modern browsers?

how to get Hight and Width image javascript

function readImage(inputFiles,$input){
if(inputFiles == undefined || inputFiles.length == 0) return;
var inputFile = inputFiles[0];
var reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onload = function(event) {
$input.attr("src", event.target.result);
var image = new Image();
image.src = event.target.result;
image.onload = function() {
console.log('height: ' + this.height); ** <=== this * **
console.log('width: ' + this.width); ** <=== and this * **
};
};
}
how i can make them global var
console.log('height: ' + this.height);
console.log('width: ' + this.width);
i want when i load an image i can get the height and width from another function
like :
function getSize(){
return this.height+'|'+this.width;
}

You can get the image size, by using the following line of code:
var image = document.getElementById ('image');
console.log (image.clientWidth + "x" + image.clientHeight)
Sample code in fiddle.

Detect When the Canvas is Done Drawing - onload - onchange - Javascript

Here is HTML and Code that draws an image into a canvas, after a user has used a file picker.
HTML
<form class='frmUpload'>
<input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>
<button onclick='fncSaveAsJPG()'>Convert Img To JPEG</button>
<canvas id="cnvsForFormat" width="400" height="266"></canvas>
<img id='imgTwoForJPG' src="">
Script
<script>
window.picUpload = function(frmData) {
console.log("picUpload ran: " + frmData);
var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");
cnvs.style.border="1px solid #c3c3c3";
var img = new Image;
img.src = URL.createObjectURL(frmData);
console.log('img: ' + img);
img.onload = function() {
var picWidth = this.width;
var picHeight = this.height;
var wdthHghtRatio = picHeight/picWidth;
console.log('picWidth: ' + Number(picWidth));
console.log('picHeight: ' + Number(picHeight));
console.log('wdthHghtRatio: ' + wdthHghtRatio);
if (Number(picWidth) > 400) {
var newHeight = Math.round(Number(400) * wdthHghtRatio);
} else {
return false;
};
document.getElementById('cnvsForFormat').height = newHeight;
console.log('width: ' + picWidth + " h: " + picHeight);
console.log('width: 400 h: ' + newHeight);
//You must change the width and height settings in order to decrease the image size, but
//it needs to be proportional to the original dimensions.
ctx.drawImage(img,0,0, 400, newHeight);
};
cnvs.onload = function () {
console.log('Onload Canvas 2 Ran');
};
};
cnvsForFormat.onload = function () {
console.log('Onload Canvas Ran');
};
</script>
I've tried attaching the .onload() method to various elements and put the code in various places without any luck. How to I get some code to run with the <canvas> element is done with the drawImage event?

dimension of an image and then check the critera

I need a functionality in which i am uploading an image and checking the max criteria.if the image is bigger then max criteria then show alert msg
alert("Height is bigger then our max criteria pls select image max height and width =etc");
I am able to do all functionality but when I am uploading image then i am giving a condition to show the selected image actual Hight an Width.and i am getting previous image height an width
my coading is:
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://jqueryui.com/resources/demos/style.css" rel="stylesheet"></link>
<script type="text/jquery">
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});
</script>
<style>
#uploadPreview img {
height:32px;
}
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>
Question/problem: Each time i am getting previous selected image dimension not current image image dimension.
Hope you understand my question

See THIS FIDDLE, the important change is that your logic is wrong- you're checking the height and width against the previously uploaded image (blah), you actually need to execute the upload to check the properties- and then determine what action to take.
Note that the below/linked example takes this answer on SO, edited for your purposes.
HTML
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
JS
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxh = 800;
var maxw = 800;
reader.readAsDataURL(file);
reader.onload = function (_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function () {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~ (file.size / 1024) + 'KB';
if (w > maxw && h > maxh) {
alert("Height is bigger then over max criteria pls select image max height and width =2024X2024");
alert(width);
alert(height);
} else {
$('#uploadPreview').html('<img src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
}
};
image.onerror = function () {
alert('Invalid file type: ' + file.type);
};
};
}
$("#choose").change(function (e) {
if (this.disabled) return alert('File upload not supported!');
var F = this.files;
if (F && F[0]) for (var i = 0; i < F.length; i++) readImage(F[i]);
});

Get image width height javascript

Well, I have this code:
http://jsfiddle.net/hv9gB/3/
(function() {
var img = document.getElementById('my_image');
// Original
var width, height;
// Display
var d_width = img.width;
var d_height = img.height;
var updateDetail = function() {
document
.getElementById('display_size')
.innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;
document
.getElementById('native_size')
.innerHTML = 'Original Size: ' + width + ' x ' + height;
};
// Using naturalWidth/Height
if (img.naturalWidth) {
width = img.naturalWidth;
height = img.naturalHeight;
updateDetail();
} else {
// Using an Image Object
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
updateDetail();
};
img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}
}());
And that is my site:
http://dhems.x10.mx/
But on my site isn't working show the width and height of image
Why?!?!

Put your code in
window.onload = function() {
//insert code here
}
Your js file is executed before the engine reach the picture..You're getting the following console error:
Uncaught TypeError: Cannot read property 'width' of null
It's also a good practice to put all scripts files in the end of the page and all css files in the begin. It will increase the loading time of your page, because if JS files are in the begin, your browser won't start to render until these files are downloaded.
your code should look like:
window.onload = function() {
var img = document.getElementById('my_image');
// Original
var width, height;
// Display
var d_width = img.width;
var d_height = img.height;
var updateDetail = function() {
document
.getElementById('display_size')
.innerHTML = 'Display Size: ' + d_width + ' x ' + d_height;
document
.getElementById('native_size')
.innerHTML = 'Original Size: ' + width + ' x ' + height;
};
// Using naturalWidth/Height
if (img.naturalWidth) {
width = img.naturalWidth;
height = img.naturalHeight;
updateDetail();
} else {
// Using an Image Object
img = new Image();
img.onload = function() {
width = this.width;
height = this.height;
updateDetail();
};
img.src = 'http://lorempixel.com/output/nature-q-c-640-480-3.jpg';
}
}

Move the script tag after the image in HTML. Script gets executed before the image goes into page.

Put the code at the bottom of your <body> in a <script type='text/javascript'> or use window.onload. If you have other things loading onload the first option is your best choice, otherwise use this code:
<script type='text/javascript'>
(function(){
var pre = window.onload;
onload = function(){
if(pre)pre();
//other code here
}
})();
</script>
This example can be used in your <head>.

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
function readImage(file) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result; // url.createObjectURL(file);
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type, // ext only: // file.type.split('/')[1],
n = file.name,
s = ~~(file.size/1024) +'KB';
$('#uploadPreview').append('<img src="'+ this.src +'"> '+w+'x'+h+' '+s+' '+t+' '+n+'<br>');
};
image.onerror= function() {
alert('Invalid file type: '+ file.type);
};
};
}
$("#choose").change(function (e) {
if(this.disabled) return alert('File upload not supported!');
var F = this.files;
if(F && F[0]) for(var i=0; i<F.length; i++) readImage( F[i] );
});
</script>
<meta charset=utf-8 />
<title>Multiple image upload with preview by Roko C.B.</title>
</head>
<body>
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview"></div>
</body>
</html>