js本地预览图片
废话不说 直接上代码
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<img id="image" src=""/>
<br/>
<input type="file" id="file" onchange="selectImage(this);"/> <br>
<br/>
<script>
function selectImage(file) {
alert(file.value.substring(file.value.lastIndexOf('.')));
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
var data = evt.target.result;
//加载图片获取图片真实宽度和高度
var image = new Image();
image.onload=function(){
var width = image.width;
var height = image.height;
alert(width+'======'+height+"====="+file.files[0].size);
};
image.src= data;
document.getElementById('image').src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
$("#image").attr({'width':'100px','height':'100px'});
}
</script>
</body>
</html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<img id="image" src=""/>
<br/>
<input type="file" id="file" onchange="selectImage(this);"/> <br>
<br/>
<script>
function selectImage(file) {
alert(file.value.substring(file.value.lastIndexOf('.')));
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
var data = evt.target.result;
//加载图片获取图片真实宽度和高度
var image = new Image();
image.onload=function(){
var width = image.width;
var height = image.height;
alert(width+'======'+height+"====="+file.files[0].size);
};
image.src= data;
document.getElementById('image').src = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
$("#image").attr({'width':'100px','height':'100px'});
}
</script>
</body>
</html>
