js实现图片上传的预览效果

最新推荐文章于 2024-04-18 00:52:22 发布

大叔说码

最新推荐文章于 2024-04-18 00:52:22 发布

阅读量499

点赞数

CC 4.0 BY-SA版权

分类专栏： JS+JQuery 文章标签： javascript js 图片预览

本文链接：https://blog.youkuaiyun.com/CNYYGJ/article/details/76883373

JS+JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的在上传图片前进行预览的方法。该方法通过监听文件输入元素的更改事件，根据不同浏览器环境创建对象URL以显示所选图片。

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

见代码：

上传图片示例：

html:

<img   src="" id="img1" class="img-responsive" alt="Cinque Terre" style="display:none;" width="100px" height="100px"> 
 <input type="file"  id="input1" onchange="preview(1)" name="icon">

js:

<script type="text/javascript">
	//上传图片前先显示出来
	function preview(id){
    	var file = document.getElementById('input'+id).files[0];
	    var url ; 
	    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) ;
	    }

	    document.getElementById("img"+id).src=url;
	    if(url){
	    document.getElementById("img"+id).style.display="block";
		}

	}
</script>

更改图片示例：
html:

<img   src="xxx" id="img1" class="img-responsive" alt="Cinque Terre" width="100px" height="100px"> 
<input type="file" id="input1" onchange="preview(1)" name="icon">

js:

<script type="text/javascript">
	//上传图片前先显示出来
	function preview(id){
    	var file = document.getElementById('input'+id).files[0];
	    var url ; 
	    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) ;
	    }

	    document.getElementById("img"+id).src=url;
	 
	}
</script>

注：

注意image和input两个标签id值的特点，js是根据id值来绑定的