input type=file 上传图片并显示

最新推荐文章于 2024-06-06 10:36:09 发布

翻译最新推荐文章于 2024-06-06 10:36:09 发布 · 1k 阅读

文章标签：

#javascript

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种利用HTML和JavaScript实现图片文件选择后即时预览的方法。通过简单的HTML结构结合JavaScript代码，可以实现在用户选择图片文件后立即在页面上显示所选图片的功能。这种方法适用于需要用户上传图片的应用场景，能够提升用户体验。

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

html代码：

			<input type="file" name="choose" id="choose" accept="image/*">
				<label for="choose">
					<img alt="正面" id="Img" src="../../images/camera.png"> 
				</label>
				<p>正面</p>

js代码

		$('#choose').change(function(){
		  	$('p').css('display','none');
		  	var objUrl = getObjectURL(this.files[0]) ;
			  if (objUrl) {
			            $('#Img').attr("src", objUrl);
			        }
			
			  function getObjectURL(file) {
			    var url = null;
			    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;
			}
		});