使用js实现图片上传预览和验证格式

最新推荐文章于 2025-03-08 12:11:34 发布

上心

最新推荐文章于 2025-03-08 12:11:34 发布

阅读量510

点赞数

分类专栏： js 文章标签： js javaScript 图片验证图片预览

本文链接：https://blog.youkuaiyun.com/it_xiaolei/article/details/95522752

版权

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现图片上传时的预览和格式验证功能。首先，通过验证`file.type`和`file.name`来过滤非图片文件，接着详细描述了实现流程，并提供了关键的js代码示例。

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

使用js实现图片上传预览和验证格式

最近一直在做web页面的上传功能，也是第一次接触到上传这一块，也没有啥经验，还好我们有一个强大的网络，通过各种途径，最终还是学会了做一个简单的js图片验证上传和预览的功能，具体步骤如下：

1、验证file所选择的文件的类型

我们都知道在使用input标签的type=file属性时，可以直接访问本地磁盘从而选择需要上传的文件，但是他的访问类型是没有限制的，因此我们需要给它做一下简单的过滤，避免上传的东西对系统造成危害以及对系统资源浪费。
通过查看该标签的属性我们不难看出，在使用file时有几个属性我们不得不知道一下，
1）file.type type ->也就是我们所选择的文件类型，一般包括文件类型和扩展名：比如照片（123.jpg） type: image/jpeg
2）file.name name->也就是我们所选择的文件名:123.jpg
了解一下上面两个属性就已经足够我们实现js图片上传验证以及预览了，其他有需要了解的自己去查找资料

2、想法实现流程图

Alt text

3、js代码

<input type="file" onchange="preview(this)" name="image"/>
<div class="preview" id="preview"></div>
<script type="text/javascript">
	/**
	 * //上传文件验证
	 * 类型限制仅允许上传图片[jpg|png|gif|jpeg|JPJ|PNG|GIF|JPEG]
	 * @param  {[type]} file [description]
	 * @return {[type]}      [description]
	 */
	function preview(file){
		var prevDiv = document.getElementById("preview");
		//console.log(prevDiv);
		
		//取得上传文件的类型file.files[0].type
		var fileType = file.files[0].type.split("/")[0];
		//取得上传文件的后缀名.jpg
		var fileExt = file.files[0].name.split(".")[1];
		alert(file.files[0].name+"   "+fileExt);
		//允许上传类型正则
		var pattern = /(jpg|png|gif|JPG|PNG|GIF|jpeg|JPEG)/;
		if(fileType=="image"){
			//进行后缀名匹配
			if(pattern.test(fileExt)){
				//匹配成功
				//上传预览
				if(file.files && file.files[0]){
				var reader = new FileReader();
				reader.onload = function(evt){
					prevDiv.innerHTML = '<img src="' + evt.target.result + '"/>';
					
					}
					reader.readAsDataURL(file.files[0]);
				}else{
					prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\''+file.value+'\')"></div>';
				}
			}else{
				//设置提醒错误内容
				prevDiv.innerHTML = "<h5 style='color:red;'>只允许上传这些格式的图片jpg|png|gif|JPG|PNG|GIF|jpeg|JPEG</h5>";
				//将组件设置为空
				file.value="";
			}

		}else{
			//设置提醒错误内容
			prevDiv.innerHTML = "<h5 style='color:red;'>只允许上传这些格式的图片jpg|png|gif|JPG|PNG|GIF|jpeg|JPEG</h5>";
			file.value="";
		}	

			
	}
	</script>