上传图片谷歌、火狐、ie浏览器兼容问题

最新推荐文章于 2021-07-08 13:41:54 发布

samllplum

最新推荐文章于 2021-07-08 13:41:54 发布

阅读量571

点赞数 1

分类专栏： JS基础文章标签：浏览器兼容

本文链接：https://blog.csdn.net/sunnyjingqi/article/details/87712945

版权

JS基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

浏览器兼容问题在面试中也是很重要的，今天来掌握一下<input type="file">表单的上传图片兼容器功能，在input表单的上面插入图片，将表单display设置为none，之后点击图片触发上传图片的click（）方法，很容易地解决了浏览器兼容器问题，并将图片的value显示在p标签内，直接上代码：

<!DOCTYPE html>
<html>
<head>
	<title>上传图片浏览器兼容问题</title>
	<style type="text/css">
		#tin{
			display: none;
		}
		input[type=submit]{
			background:#fff;
			border:1px solid #ccc;
		}
	</style>
</head>
<body>
	<p>上传文件</p>
	<p><input type="file" id="tin"></p>
	<p><img src="sc.jpg" id="up"></p>
	<p id="pid"></p>
	<p><input type="submit" value="ok"></p>
</body>
<script type="text/javascript">
	oUp = document.getElementById('up');
	oTin = document.getElementById('tin');
	oPid = document.getElementById('pid');
	oUp.onclick = function () {
		oTin.click();
	}
	oTin.onchange = function(){
		oPid.innerHTML = this.value;
	}
</script>
</html>

效果如下：