html 点击选择本地文件(图片)显示和上传

深碍√TFBOYSˉ_ 2022-06-15 07:53 718阅读 0赞

图片点击触发input-file点击  
function F\_Open\_dialog(id) \{  
            document.getElementById(id).click();  
\}  
  
  
处理event事件，给image赋值base64的src  
 function imgChange(e, imageid) \{  
            console.info(e.target.files\[0\]);//图片文件  
            console.log(e.target.value);//这个也是文件的路径和上面的dom.value是一样的  
            var reader = new FileReader();  
            reader.onload = (function (file) \{  
                return function (e) \{  
                    console.info(this.result); //这个就是base64的数据了  
                    document.getElementById(imageid).src = this.result;  
                \};  
            \})(e.target.files\[0\]);  
            reader.readAsDataURL(e.target.files\[0\]);  
\}  
  
  
  
  
body中需要加上隐藏的input-file和img标签  
 <input type="file" id="btn\_file3" name="consignerRdFile" accept="image/jpg,image/jpeg,image/gif,image/png"  
                   style="display:none"  
                   οnchange="imgChange(event,'consignerRdSign')">  
<img id="consignerRdSign" src="/static/images/upload\_img.png" width="100px" height="100px"  
                 οnclick="F\_Open\_dialog('btn\_file3')">

发表评论取消回复

表情：

评论列表（有 0 条评论，718人围观）

还没有评论，来说两句吧...

相关阅读

相关 Spring Boot上传文件/图片&图片显示

一、文章前言 1. 本文章主要讲述如何在spring boot下上传文件，尤其是上传图片并显示，例如用户注册的时候上传了头像，此时头像会加载在注册页面上面，在Spri...

左手的ㄟ右手/ 2024年04月17日 20:49/ 0 赞/ 65 阅读

相关 HTML点击显示、点击隐藏details 标签

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(r

雨点打透心脏的1/2处/ 2024年03月16日 21:32/ 0 赞/ 34 阅读

相关 github上传.md文件显示图片

1.调整大小使用style="zoom:50%;"可以设置缩放： <img src="../0other/0/pics/1093303-20170626104

蔚落/ 2023年10月06日 14:16/ 0 赞/ 38 阅读

相关 vue删除图片同时删除本地文件_基于VUE选择上传图片并页面显示（图片可删除）...

这篇文章主要为大家详细介绍了基于VUE选择上传图片并页面显示(图片可删除)，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧

╰半夏微凉°/ 2023年01月08日 08:08/ 0 赞/ 145 阅读

相关 html不允许选择,html选择不可点击

我正在将我的转换为更具有角度2的语法。我使用的是Angular 2，但我使用的是jquery，因为我的这是不好的做法，但它工作。现在点击它不会发生任何事情(不会出现下拉菜单)。

爱被打了一巴掌/ 2022年10月06日 04:52/ 0 赞/ 189 阅读

相关 JS上传图片点击获取颜色代码

[下载地址][Link 1] JS上传图片点击获取颜色代码是一款原生js点击按钮上传图片，任意点击图片内容可获取当前颜色。 ![62daa99b9d47481a659bef

朴灿烈づ我的快乐病毒、/ 2022年09月16日 13:17/ 0 赞/ 133 阅读

相关 html 点击选择本地文件(图片)显示和上传

图片点击触发input-file点击 function F\_Open\_dialog(id) \{ document.getElementBy

深碍√TFBOYSˉ_/ 2022年06月15日 07:53/ 0 赞/ 719 阅读

相关 html上传图片后，在页面显示上传的图片

html上传图片后，在页面显示上传的图片 1、html <form class="container" enctype="multipart/form-data"

爱被打了一巴掌/ 2022年06月04日 02:42/ 0 赞/ 308 阅读

相关点击图片上传实时预览

html源代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset

快来打我*/ 2022年05月08日 12:16/ 0 赞/ 653 阅读

相关 uniapp 上传图片、点击预览图片

1、在回调中打开本地相册 uni.chooseImage({ count:上传照片数量, //浏览器无法限制,默认上传数量为9

比眉伴天荒/ 2021年07月24日 11:07/ 0 赞/ 1745 阅读