页面图片回显

最新推荐文章于 2021-09-09 17:18:33 发布

xujhui

最新推荐文章于 2021-09-09 17:18:33 发布

阅读量653

点赞数

分类专栏： html 前端

本文链接：https://blog.youkuaiyun.com/JontyXu/article/details/102842212

版权

前端同时被 2 个专栏收录

5 篇文章

订阅专栏

html

3 篇文章

订阅专栏

本文介绍了一个使用JavaScript/jQuery实现的功能，当用户从文件输入框选择一张图片后，该图片会立即显示在页面上的指定位置。具体实现方式为监听文件输入框的'change'事件，获取用户选择的文件对象，然后使用window.URL.createObjectURL方法创建一个URL，最后将这个URL设置为图片元素的'src'属性。

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

一、JavaScript/jQuery部分

$('#photo').bind('change',function(){

	var file=$("#photo").get(0).files[0];//得到file对象

	var srcValue=window.URL.createObjectURL(file);//传入的参数创建一个指向该参数对象的URL
   
	$("#my-photo").attr('src',srcValue);

});

二、html部分

<img id="my-photo">

<input id="photo" name="photo" type="file" required accept=".jpg,.jpeg,.png" />

结语：到此，上传到页面的图片就可以回显在当前页面指定容器上了。