jq添加＜img＞点击事件调用上传图片方法并回显图片

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42402326/article/details/121099136
版权

效果图

在这里插入图片描述

1.html添加如下元素

<img src="https://img1.baidu.com/it/u=1983462487,1113805563&fm=26&fmt=auto" alt="" width="80" id="logoImg" onclick="imgChange()">
<input type="file" style="width: 305px;display: none" name="logoPicUrl" multiple="multiple" id="logoPicUrl" autocomplete="off" 
accept="image/x-png,image/gif,image/jpeg,image/bmp">

2.js添加如下方法

/**
 * 点击图片事件
 */
function imgChange() {
    $('#logoPicUrl').click();
    $("#logoPicUrl").unbind().change(function(e) {
        if ($('#logoPicUrl').val() == '') {
            return;
        }
        changeImg(e,$(this).val());
    });
}

/**
 * 改变图片
 */
function changeImg(e,filePath) {
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    //检查后缀名
    if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
        showError('文件格式必须为：png/jpg/jpeg');
        return;
    }
    //获取并记录图片的base64编码
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = function() {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        var dataURL = reader.result;
        console.log(dataURL)
        // 显示图片
        $("#logoImg").attr('src',dataURL);
    };
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击图片上传并回显</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<style>
		
	</style>
</head>

<body>
	<img src="https://img1.baidu.com/it/u=1983462487,1113805563&fm=26&fmt=auto" alt="" width="80" id="logoImg" onclick="imgChange()">
	<input type="file" style="width: 305px;display: none" name="logoPicUrl" multiple="multiple" id="logoPicUrl" autocomplete="off" 
	accept="image/x-png,image/gif,image/jpeg,image/bmp">
</body>
<script>
/**
 * 点击图片事件
 */
function imgChange() {
    $('#logoPicUrl').click();
    $("#logoPicUrl").unbind().change(function(e) {
        if ($('#logoPicUrl').val() == '') {
            return;
        }
        changeImg(e,$(this).val());
    });
}

/**
 * 改变图片
 */
function changeImg(e,filePath) {
    fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
    //检查后缀名
    if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
        showError('文件格式必须为：png/jpg/jpeg');
        return;
    }
    //获取并记录图片的base64编码
    var reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = function() {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        var dataURL = reader.result;
        console.log(dataURL)
        // 显示图片
        $("#logoImg").attr('src',dataURL);
    };
}

</script>
</html>
哎呦喂O_o嗨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
11-27
本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法。分享给大家供大家参考，具体如下： 这里演示js如何给页面中所有的img对象加上onclick事件，且实现在新窗体中查看该图片文件的功能： [removed] <!-- ///给页面中所有img对象添加onclick事件 //author:aganar /// function AddImgClickEvent() { var objs = document.ge
直接在img标签上添加点击事件
热门推荐
付出总会有收获!
11-03 7万+
如果不想用a来包一层的话，那么直接在img标签上添加onclick来点击跳转，
为某个div下img标签添加点击事件，可在新页面打开base64类型图片
zihang_cheng的博客
11-16 2335
为某个div下img标签添加点击事件，可在新页面打开base64类型图片
图片点击放大
m0_51700376的博客
11-22 344
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <style> .img_content { display: none; position: absolute; margin: 5% 0 0 40%; background-color: white; z-index:1002;
vue入门 第一天（下）
gako15587481707的博客
07-15 2246
vue入门指令
IMG 标签的 onload 和 onerror 事件
qross的博客
06-01 1万+
IMG 标签一般用来加载图片，在某些情况下，还会用来做些特别的事，如记录页面访问量，老吴在很多年前见过这种玩法。除了 document 和 window 对象之外，IMG 标签是少有的几个支持 和事件的标签之一，其他还有 SCRIPT、LINK、FRAME、IFRAME 标签等，即只要有外部文件引用的标签。还有一个事件，这里不讨论。
二、ImGui给按钮添加点击事件
zqz123321_的博客
09-19 613
【代码】二、给按钮添加点击事件。
img 标签事件 onerror 图片加载错误
weixin_42448623的博客
09-12 2749
img标签中的src图片加载失败 会出现一个碎片图标 借用img标签的onerror事件，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。 解决方法：可以使用一张提示错误的图片代替显示不了的图片。 代码如下： <h5>图片路径不正确 备用图片路径正确</h5> <img src="../../img/75.jpg...
JavaScript实现图片上传并预览并提交
入门菜鸟程序员的成长
02-18 1704
学习一下思路，上传部分可以用vue对象方法和axios代替 图片上传并预览 HTML &lt;div class="file-box"&gt; &lt;img id="preview" /&gt; &lt;input type="text" id="imgfield" class="txt" placeholder="预览&quot
如何用input标签和jquery实现多图片的上传和回显功能
12-29
本文主要记录如何用input标签和jquery实现多图片的上传和回显，不会涉及后端的交互，大概的效果看图   效果图 我们从零来做一个这样的demo 第一步： 我们先完善一下我们的页面，默认的input-file标签非常丑，我们...
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
10-15
主要介绍了Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
webuploader批量添加、删除、回显编辑图片完整demo（PHP版）
12-31
详细请查看：https://blog.csdn.net/qq_22146195/article/details/103779432
SpringBoot之图片上传与回显
08-18
SpringBoot之图片上传与回显的小Demo，非常适合初学者上手。本人博客也写了关于图片上传与回显的一些细节，大家可以参考。
图片上传并回显插件11111
09-08
图片上传插件，可多文件上传和回显，可删除已上传图片，可进行拖拽上传。 springmvc接收传向后台的值方法 @RequestMapping("/admin/addImage.do") public ModelAndView handleRequest(HttpServletRequest request,...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 434
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1019
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 311
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
vue 实现级联选择器功能
清音的博客
04-22 538
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 430
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
html上传图片并回显
06-06
好的，以下是一个简单的 HTML 页面，可以上传图片并在页面上回显出来： ```html <!DOCTYPE html> <html> <head> <title>上传图片并回显</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <input type="file" name="image" accept="image/*"> <input type="submit" value="上传"> </form> <br> <img id="preview" src="" style="max-width: 400px;"> <script> var input = document.querySelector('input[type=file]'); var preview = document.querySelector('#preview'); input.addEventListener('change', function () { var file = input.files[0]; var reader = new FileReader(); reader.onloadend = function () { preview.src = reader.result; } if (file) { reader.readAsDataURL(file); } else { preview.src = ""; } }); </script> </body> </html> ``` 这个页面有一个表单，允许用户选择一个图片文件并提交表单。提交表单后，页面不会刷新，而是使用 JavaScript 将选择的图片文件预览在页面上。这里使用 FileReader API 将图片文件转换为 Data URL，然后设置 `<img>` 标签的 `src` 属性为该 URL，从而实现了预览效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哎呦喂O_o嗨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值