html js 上传图片并回显

最新推荐文章于 2025-06-06 11:13:40 发布

java知路

最新推荐文章于 2025-06-06 11:13:40 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_34874784/article/details/81386969

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种利用JavaScript和HTML实现本地图片上传并实时预览的方法。通过FileReader API读取用户选择的文件，并使用jQuery更新页面上的图片源，实现了简单的图片预览功能。

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

<html>
<body>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
　<script>
function changImg(e){
           for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files.item(i);
               //验证是否为图片，不是就跳出循环
if (!(/^image\/.*$/i.test(file.type))) {
alert("不是图片！")
continue;
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
$("#image").attr("src",e.target.result); //显示图片
               }
}
}
</script>
使用方式:
<form action="">
<input type="file" name="files" accept="image/*" onchange="changImg(event)" >
<img id="image" src="" height="100px",width="100px">
</form>
</body>
</html>