Image Height and Width Validation through Javascript.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
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>');
if(h<786&&w<1024)
{
alert('file height and width not supported');
$("#choose").val("");
$("#choose").focus();
$("#error").append("* Image Not Supported");
}
        };
        image.onerror= function() {
            alert('Invalid file type: '+ file.type);
        };      
    };

}
$(document).ready(function(){

$("#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>
</head>
<body>
<input type="file" id="choose" multiple="multiple" />
<span id="error" style="color:red;"></span>
<br>
<div id="uploadPreview"></div>
</body>
</html>







Popular posts from this blog

Simple Sign up design. Android.

Cart page design in android.

Set Date on jDateChooser and retrieve record from database.