图片上传及预览效果

最新推荐文章于 2024-09-19 10:49:23 发布

是明仔呀

最新推荐文章于 2024-09-19 10:49:23 发布

阅读量264

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： jquery 图片

本文链接：https://blog.youkuaiyun.com/qq_18274389/article/details/53392243

WEB前端专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的图片上传与预览的方法。该方法能够验证上传的图片格式（仅限jpg、gif、png）及大小（不超过10M），并通过不同浏览器的特性显示预览图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery 实现图片的上传以及预览效果,

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(function(){
	//判断是否为图片格式并且大小合适
	$('#imgOne').change(function () {
		//将支持的图片格式放在数组里面
		var trueType = new Array('jpg', 'gif', 'png');
		//获取上传文件的格式,文件的后缀名
		var fileType = $(this).val().substring($(this).val().lastIndexOf('.') + 1);
		var fileSize = this.files[0].size;
		//判断上传文件类型是否在数组中
    var inOrOut = $.inArray(fileType,trueType);
	  if(inOrOut == -1){//不在数组中
					$('#msg_img').css('color','red');
					$('#msg_img').html('图片格式必须为jpg/gif/png');
			}else{
					//判断上传文件大小
					var size = fileSize / 1024;
					if(size > 300){
							$('#msg_img').css('color','red');
							$('#msg_img').html('上传图片大小不能超过10M!');

					}else{
							$('#msg_img').html('')
							//显示图片
							preImg();
					}
			}	
	});
});
/** 
* 获取上传路径
*/ 
function getFileUrl(sourceId) { 
	var url; 
	if (navigator.userAgent.indexOf("MSIE")>=1) { // IE 
		url = document.getElementById(sourceId).value; 
	} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome 
		url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); 
	} 
	return url; 
} 
/** 
* 在一定位置显示图片 
*/ 
function preImg() {
	var url = getFileUrl($('#imgOne').attr('id')); 
	var imgPre = document.getElementById('imgPre');
	imgPre.src = url;
} 
</script> 
</head> 
<body> 
<h2>上传图片并显示出来</h2>
<input type="file" name="imgOne" id="imgOne"/> <span id="msg_img"> </span>
<img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> 
</body> 
</html>