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.

crop image after uploading

this is my code for image upload now i want to crop selected image.
pls help me to crop selected image.
my max dimention for croping is 145X190 px
my code for image uploading is
This:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<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 rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxw = 600;
var maxh = 600;
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 ( h > maxh || w > maxw) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(w);
alert(h);
} else {
alert(w);
alert(h);
$('#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]);
});
$(function(){
$('image.src').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#uploadPreview1').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview" ></div>
<div id="uploadPreview1" ></div>
</body>
</html>
Now i want crop the image.hope you understand my code.

You've already imported jquery.min, so you don't have to import "jquery-1.9.1.js" then.
Beside that maybe you need to call Jcrop just after you created the image tag.
I did the modification to your code and I was able to crop the uploaded image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Tooltip - Default functionality</title>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script>
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="http://deepliquid.com/projects/Jcrop/demos/demo_files/demos.css" type="text/css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script >
$(function () {
function readImage(file) {
var reader = new FileReader();
var image = new Image();
var maxw = 600;
var maxh = 600;
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 ( h > maxh || w > maxw) {
alert("Height and width is bigger then over max criteria pls select image max height and width =2024X2024");
alert(w);
alert(h);
} else {
alert(w);
alert(h);
$('#uploadPreview').html('<img id="myImage" src="' + this.src + '"> ' + w + 'x' + h + ' ' + s + ' ' + t + ' ' + n + '<br>');
$('#myImage').Jcrop({
onChange: showPreview,
onSelect: showPreview,
aspectRatio: 1
});
}
};
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]);
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#uploadPreview1').css({
width: Math.round(rx * 500) + 'px',
height: Math.round(ry * 370) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
});
</script>
<style>
</style>
</head>
<body >
<input type="file" id="choose" multiple="multiple" />
<br>
<div id="uploadPreview" ></div>
<div id="uploadPreview1" ></div>
</body>
</html>

Though I have not understood your full code but it looks like you have not implemented the crop functionality. Correct me if I am wrong there.
But to implement crop you can use Jcrop plugin from JQuery.
Let me know if I have misunderstood your query.

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>

Prompt width and height of image being uploaded

I am looking for some method to prompt the width and height of the image being uploaded using an asp file upload control. Following is the code I am using to prompt message for file size. I just want to add the width and height of the image being uploaded using that upload control. Please take a note that I can't use javascript DOM here like img.clientWidth as there is no such html object to call it.
Here's the JS Code
$(document).ready(function () {
$("#<%= fupNewImage.ClientID %>").bind("change", function () {
var fSize = ((this.files[0].size) / 1024).toFixed(2);
if (fSize <= 200) {
$("#fupSize").html('Good file size: ' + fSize + " kb Width=? and Height=?" ); // ? denotes the actual value to be put.
}
//---------More cases
});
});

Solved!!
Thanks to #Esailija
After a lot of searching I finally found a workout # REF https://stackoverflow.com/a/8904008/1584140
var _URL = window.URL || window.webkitURL;
$("#<%= fupNewImage.ClientID %>").bind("change", function () {
//================Changed Code===================
var file, img;
if ((file = this.files[0])) {
img = new Image();
img.onload = function () {
var fSize = ((file.size) / 1024).toFixed(2);
var WH = " Widht: " + this.width + "px & Height: " + this.height + "px";
if (fSize <= 200) {
$("#fupSize").html('Good file size: ' + fSize + " kb" + WH);
}
};
img.onerror = function () {
alert("not a valid file: " + file.type);
};
img.src = _URL.createObjectURL(file);
}
//====================================
});
});