码迷,mamicode.com
首页 > Web开发 > 详细

js+html 实现图片上传预览

时间:2016-08-22 12:10:50      阅读:212      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传照片</title>
<style type="text/css">
#tabkePhoto{display:none;}
.photo{}
.imgBox{width:200px;height:200px;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#tabkePhoto{display:block;}
</style>
<![endif]-->
<!--[if lte IE 8]>
<style type="text/css">
#tabkePhoto{display:block;}
</style>
<![endif]-->
<!--[if lte IE 9]>
<style type="text/css">
#tabkePhoto{display:block;}
</style>
<![endif]-->
<script type="text/javascript" src="../jquery-1.11.3/jquery.min.js"></script>
</head>
<body>
<label class="photo" for="tabkePhoto">点击上传</label>
<input id="tabkePhoto" type=‘file‘>
<div class="imgBox">
</div>
<script type="text/javascript">
$(function(){
$(‘#tabkePhoto‘).change(function(e){
var _suffix = $(this).val().substr(Number($(this).val().indexOf(‘.‘))+1).toUpperCase();
if(this.files && this.files[0]){
var _file = this.files[0], 
imgUrl = new FileReader();
imgUrl.readAsDataURL(_file);
imgUrl.onload = function(){
if(!(_suffix ==‘JPG‘ || _suffix == ‘PNG‘|| _suffix == ‘JPEG‘|| _suffix==‘TIFF‘|| _suffix==‘BMP‘)){
alert(‘骚年,格式好像不对吧!你换张试试‘);
}else{
var _html = ‘<img src="‘+this.result+‘">‘;
$(‘.imgBox‘).html(_html);
}
}
}else{
$(this).select();
var _src = document.selection.createRange().text;
if(!(_suffix ==‘JPG‘ || _suffix == ‘PNG‘|| _suffix == ‘JPEG‘|| _suffix==‘TIFF‘|| _suffix==‘BMP‘)){
alert(‘骚年,格式好像不对吧!你换张试试‘);
}else{
var _html = ‘<img src="‘+_src+‘">‘;
$(‘.imgBox‘).html(_html);
}
}
})
})
</script>
</body>
</html>

js+html 实现图片上传预览

标签:

原文地址:http://www.cnblogs.com/xlxlyl/p/5794956.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!