原生js图片上传和预览

最新推荐文章于 2024-06-25 13:13:22 发布

wgod

最新推荐文章于 2024-06-25 13:13:22 发布

阅读量947

点赞数

本文链接：https://blog.csdn.net/weixin_44324124/article/details/93078789

版权

<head>
	<meta charset="{CHARSET}">
	<title></title>
	<style type="text/css">
		.inputfile {
			display: none;
		}
	</style>
</head>

<body>
	<div id="box">
		<input type="file" name="file" id="file" class="inputfile" />
		<label for="file" class='btn btn-success'>Choose a file</label>
	</div>
	<form action="" enctype="multipart/form-data">
		<input id="file" class="filepath" onchange="changepic(this)" type="file"><br>
		<img src="" id="show" width="200">
	</form>
	<script>
		function changepic(obj) {
			//console.log(obj.files[0]);//这里可以获取上传文件的name
			var newsrc = getObjectURL(obj.files[0]);
			document.getElementById('show').src = newsrc;
		}
		//建立一個可存取到該file的url
		function getObjectURL(file) {
			var url = null;
			// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
			if(window.createObjectURL != undefined) { // basic
				url = window.createObjectURL(file);
			} else if(window.URL != undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if(window.webkitURL != undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			return url;
		}
	</script>
	
</body>

wgod

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
原生js图片上传和预览

<head> <meta charset="{CHARSET}"> <title></title> <style type="text/css"> .inputfile { display: none; } </style></head><body> <div i...
复制链接

扫一扫