<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
*{ font-family: verdana; }
#uploadPreview img{ height:200px; width:200px; }
</style>
</head>
<body>
<input type="file" id="choose" multiple="multiple" /> <br/>
<div id="uploadPreview"></div>
</body>
<script type="text/javascript">
$(function(){
function readImage(file) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result;
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type,
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>
</html>
Output :)
1)
2)
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<style type="text/css">
*{ font-family: verdana; }
#uploadPreview img{ height:200px; width:200px; }
</style>
</head>
<body>
<input type="file" id="choose" multiple="multiple" /> <br/>
<div id="uploadPreview"></div>
</body>
<script type="text/javascript">
$(function(){
function readImage(file) {
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);
reader.onload = function(_file) {
image.src = _file.target.result;
image.onload = function() {
var w = this.width,
h = this.height,
t = file.type,
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>
</html>
Output :)
1)
2)
No comments:
Post a Comment