js+html 实现图片上传预览

最新推荐文章于 2023-02-15 13:54:38 发布

weixin_30883777

最新推荐文章于 2023-02-15 13:54:38 发布

阅读量65

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xlxlyl/p/5794956.html

版权

<!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>

转载于:https://www.cnblogs.com/xlxlyl/p/5794956.html

weixin_30883777

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+html 实现图片上传预览

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>上传照片</title><style type="text/css">#tabkePhoto{display:none;}.photo{}.imgBox{width:200p...
复制链接

扫一扫