您现在的位置是：网站首页> 前端技术> JavaScript JavaScript

JavaScript实现图片上传预览效果

Smile 2020-09-28 HTML Javascript 阅读：1281

简介在网页上，上传图片时一般有图片预览的效果，给用户比较良好的体验，网页的图片上传到服务器数据库前，先预览是很有必要的一个步骤，这样可以防止图片文件有问题而提交到数据库，占用服务器存储资源

1、HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript实现图片上传预览效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="upload" method="post" enctype="multipart/form-data">
	<input type="file" name="pic" id="pic" onchange="picUpload();">
</form>
</body>
</html>

2、JavaScript代码

<script type="text/javascript">

	function picUpload(){
		var pic = document.getElementById("pic");//获取input对象

		var image = pic.value;
	    var extStart = image.lastIndexOf(".");
	    var ext = image.substring(extStart, image.length).toUpperCase();
	    if ( ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
	        alert("图片限于png，gif，jpeg，jpg格式！");
	        return false;
	    }


    	var file = pic.files[0];//获取input上传的图片信息
    	var url = window.URL.createObjectURL(file);//得到bolb对象路径，赋值给<img>标签的src属性

    	var img = new Image('50','50');
    	img.src = url;

    	var form = document.getElementsByTagName('form')[0];
    	form.appendChild(img);
	}

</script>

效果