Javascript回显图片

第一种base64

<!DOCTYPE html>
<html><head><script type = "text/javascript" src = "../js/jquery-1.11.0.min.js"></script><style>.submitimg{width:50px;height:50px;}</style></head><body><!-- 由于javascript是在浏览器环境运行的脚本语言，所以javascript的权限很低，不能操作本地资源，这样的好处是安全性提高了，但是也带来了开发的不便。 --><!--头像--><div class="head-p" id="touxiang"><img  src="../img/头像.jpg" alt='头像'  width="100" height="100" id="avatar_img"></div><div  id="fromTx"><input type="file" class="file"  name="avatar" id="avatar"></div><script>// 头像预览
$("#avatar").change(function () {//拿到文件数据var choose_file = $(this)[0].files[0];console.log($(this))console.log($(this)[0].files)console.log(choose_file)//截取图片名称小数点后的字符串var ftype=choose_file.name.substring(choose_file.name.lastIndexOf(".")+1);//校验格式是否是图片类型if(ftype=="jpg" || ftype=="png" || ftype=="jpeg" || ftype == "JPG"){// //限制大小，照片大小不能超过1M// var size = choose_file.size / 1024 / 1024;// if (size > 1) {//     alert("头像不能大于1M");//     return false;// }// 实例化一个阅读器对象var reader = new FileReader();// 读取文件的路径，没有返回值,结果在reader.result里reader.readAsDataURL(choose_file);// 读取需要时间，读完后再修改图片路径reader.onload=function () {//回显给上方图片中$("#avatar_img").attr("src",this.result); }}else{alert("头像格式不对，请重新选择！");return false;}
});</script>  </body>
</html>

第二种window.URL.createObjectURL/window.URL.webkitURL

<!DOCTYPE html>
<html><head><title>test page</title>
</head><body><input type="file" id="fileElem" multiple accept="image/*" onchange="handleFiles(this)" style="display:none; "><div id="fileList" style="width:200px;height:200px; border:1px solid #ccc;"></div><button onclick="submitImg()">上传图片</button><div><img src="blob:null/336a4725-b376-498f-9ba1-1f66b3912828" width="200"></div><img src="../img/头像.jpg" width="200"></div>
</body><script>window.URL = window.URL || window.webkitURL;var fileElem = document.getElementById("fileElem"),fileList = document.getElementById("fileList");function handleFiles(obj) {var files = obj.files;console.log("files",files)img = new Image();if (window.URL) {//File APIalert(files[0].name + "," + files[0].size + " bytes1");img.src = window.URL.createObjectURL(files[0]); //创建一个object URL，并不是你的本地路径console.log("img.src1",img.src)img.width = 200;img.onload = function (e) {console.log("img.src1",this.src)window.URL.revokeObjectURL(this.src); //图片加载后，释放object URL}fileList.appendChild(img);} else if (window.FileReader) {//opera不支持createObjectURL/revokeObjectURL方法。用FileReader对象来处理var reader = new FileReader();reader.readAsDataURL(files[0]);reader.onload = function (e) {alert(files[0].name + "," + e.total + " bytes2");img.src = this.result;console.log("img.src2",img.src)img.width = 200;fileList.appendChild(img);}} else {//ieobj.select();obj.blur();var nfile = document.selection.createRange().text;document.selection.empty();img.src = nfile;console.log("img.src3",img.src)img.width = 200;img.onload = function () {alert(nfile + "," + img.fileSize + " bytes3");}fileList.appendChild(img);}}function submitImg() {fileElem.click()}
</script></html>

第三种blob:二进制数据流

<!DOCTYPE html ><html ><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title> </head> <body> <input type="file" id="input" /><script>input.onchange = function(e){var file = e.target.files[0]var img = new Image();console.log(img)img.src = URL.createObjectURL(file);//   blob:null/274f3c5e-2867-4d11-8318-5f4ef6a6f1a3console.log(URL.createObjectURL(file))document.body.appendChild(img)}</script> </body> </html>

第四种base64

<!DOCTYPE html><html ><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title> </head> <body> <input type="file" id="input" /><script>input.onchange = function(e){var file = e.target.files[0]var img = new Image()document.body.appendChild(img)var fileRead = new FileReader()fileRead.onload = function(){img.src = fileRead.result//利用base64回显图片console.log(fileRead.result)}fileRead.readAsDataURL(file)}</script> </body> </html>

Javascript回显图片相关推荐

vue上传图片，并回显图片
vue上传图片,并回显图片未用组件库,原生的input输入框提交这个看需求吧,用组件库的话,可以减少挺多代码的,但是这个的后端,因为只能单独提交照片,所以我就使用js了.逻辑绕绕的. <in ...
el-upload编辑时回显图片
在使用el-upload上传时,传给后端得是一个file文件流,而编辑回显的时候后端返回的是一个图片地址,这个时候就需要将url赋值到fileList里面 <el-form-item label ...
Simditor 上传图片回显图片src base64 换成图片链接
Simditor 是一款简介好用的富文本插件使用过程中发现添加图片后,后台报错说字段太长,无法存入内容原因是:Simditor 没有找到上传图片后回显的图片地址,直接获取图片的源文件转成base ...
java图片上传及图片回显1
目的:选择图片,进行图片回显之后将图片保存到服务器上(PS:没有使用任何插件,样式很丑) 实现方式: js+servlet+jsp的方式来实现事先准备: 文件上传处理在浏览器中是以流的形式提交到服务 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...
themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传（非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码配置文 ...
antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...
react-uplod-img 是一个基于 React antd组件的图片上传组件支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制排序等功能需要 re ...
vue+elemnt ul 图片上传隐藏按钮+图片回显
技术栈: vue2.6 +element 需求:在弹窗中实现图片上传,上传之后隐藏上传按钮,实现放大和删除功能,修改时回显图片. 具体实现效果如图所示: 1.隐藏上传按钮在el-upload中绑定一 ...
html输入框自定义图片,图片input框自定义样式及前端回显
前言在实际项目中,经常需要用户选择图片以便后续的上传,这时要用到Html的input,并将其type设置为file.原生的input上传图片按钮通常无法符合设计稿,我的做法是将其透明度设置为0,再把 ...

Javascript回显图片

Javascript回显图片

第一种base64

第二种window.URL.createObjectURL/window.URL.webkitURL

第三种blob:二进制数据流

第四种base64

Javascript回显图片相关推荐

最新文章

热门文章