图片转换base64编码,点击div的时候选择文件
有时候我们希望文件上传的时候预览图片,下面插件可以实现上传前预览图片 (也可以提取文件的base64编码)
max-height: 140px;max-width: 120px;可以指定图片的最大宽度和高度
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js" type="application/javascript;charset=utf-8"></script>
<style>
</style>
</head>
<body>
<!--src可以指定一个默认的背景图片-->
<img id="preview" style="width: 120px; height:140px;max-height: 140px;max-width: 120px;" src="">
<div class="btn upload">上传头像<input type="file" name="image_file" id="image_file" class="upload_pic" onchange="fileSelected('preview','image_file');"></div>
<!--显示base64编码-->
<input type="text" id="hidden_photo_base64" /> <script>
// common variables var iBytesUploaded = 0;
var iBytesTotal = 0;
var iPreviousBytesLoaded = 0;
var iMaxFilesize = 1048576; // 1MB
var oTimer = 0;
var sResultFileSize = ''; function fileSelected(a, b) {
var oFile = document.getElementById(b).files[0];
// filter for image files
var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if (!rFilter.test(oFile.type)) {
document.getElementById('error').style.display = 'block';
return;
}
// get preview element
var oImage = document.getElementById(a);
console.log(a);
// prepare HTML5 FileReader
var oReader = new FileReader();
oReader.onload = function(e) { oImage.src = e.target.result;
$("#hidden_photo_base64").val(e.target.result);
}; // read selected file as DataURL
oReader.readAsDataURL(oFile);
}
</script> </body>
</html>
效果:
有时候我们希望点击一个div的时候就可以实现选择图片的功能,也就是点击某个div的时候选择图片
思路:我们将type="file"的input隐藏掉,同时在div的点击事件中触发input的点击事件即可。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js" type="application/javascript;charset=utf-8"></script>
<style>
</style>
</head>
<body>
<!--src可以指定一个默认的背景图片-->
<div onclick="javascript:$('#image_file').click();" style="height: 200px;width: 200px;">
<img id="preview" style="width: 120px; height:140px;max-height: 140px;max-width: 120px;" src="">
</div> <input type="file" name="image_file" id="image_file" class="upload_pic" onchange="fileSelected('preview','image_file');" style="display: none;"/>
<input type="text" id="hidden_photo_base64" /> <script>// common variables
var iBytesUploaded=0;
var iBytesTotal=0;
var iPreviousBytesLoaded=0;
var iMaxFilesize=1048576; // 1MB
var oTimer=0;
var sResultFileSize='';
function fileSelected(a, b) {
var oFile=document.getElementById(b).files[0];
// filter for image files
var rFilter=/^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
if(!rFilter.test(oFile.type)) {
document.getElementById('error').style.display='block';
return;
}
// get preview element
var oImage=document.getElementById(a);
console.log(a);
// prepare HTML5 FileReader
var oReader=new FileReader();
oReader.onload=function(e) {
oImage.src=e.target.result;
$("#hidden_photo_base64").val(e.target.result);
}
;
// read selected file as DataURL
oReader.readAsDataURL(oFile);
}</script> </body>
</html>
结果:
触发一个元素的点击事件的时候有 jQueryEle.click();
第二种触发的办法是: jQueryEle.trigger('click');
补充:今天想着用input限定文件类型以及前台获取文件名等操作
<div class="layui-input-inline">
<input type="text" onclick="$('#videoFile').click();" lay-verify="required"
autocomplete="off" class="layui-input" />
<!--隐藏的div -->
<input type="file" name="file" id="videoFile" style="display: none;" onchange="checkfile(this)"/>
</div>
JS获取文件内容:
function checkfile(obj){
var files = $(obj).prop("files");
var file = files[0];
console.log(files);
}
console控制台查看可以获取到的文件信息如下:(重要的参数有:name、size、type)
于是可以用input的 accept="video/*" 属性限制文件类型是视频类型,并且在选中文件之后显示文件名:
<div class="layui-input-inline">
<input type="text" onclick="$('#videoFile').click();" lay-verify="required"
autocomplete="off" class="layui-input" />
<!--隐藏的div -->
<input type="file" name="file" accept="video/*" id="videoFile" style="display: none;" onchange="checkfile(this)"/>
</div>
function checkfile(obj){
var files = $(obj).prop("files");
var file = files[0];
var fileName = file.name;
$("#videoFileNameDisplay").val(fileName);
}
图片转换base64编码,点击div的时候选择文件的更多相关文章
- 图片转换base64数据上传,并且实现预览的简便方法
对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...
- 字符串与图片的Base64编码转换操作
//图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...
- 图片和base64编码字符串 互相转换,图片和byte数组互相转换
图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...
- JavaScript—图片与base64编码互相转换
图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...
- 用javascript实现base64编码器以及图片的base64编码
前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...
- 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用
前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...
- HTML5之图片转base64编码
之前在群里看到很多小哥哥小姐姐讨论关于图片base64互转的方法,刚好我之前用到的一个方法给大家分享一下. <!Doctype html><html> <head> ...
- H5 Js图片转base64编码
<!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- http://imgbase64.duoshitong.com/ 图片转换 base64
base64图片工具介绍: 1.支持 PNG.GIF.JPG.BMP.ICO 格式. 2.将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一 ...
随机推荐
- RabbitMQ 消费者的消息确认机制
消息确认的几点说明: 1. Basic.Ack 发回给 RabbitMQ 以告知,可以将相应 message 从 RabbitMQ 的消息缓存中移除.2. Basic.Ack 未被 consumer ...
- mysql加速source导入数据
mysql加速source导入数据 # 进入mysql中执行如下 ; ; ; ; -- 你的sql语句1 -- 你的sql语句2 -- 你的sql语句3 ; ; ; ;
- 网络编程基础【day10】:操作系统介绍
一.为什么要有操作系统 现代的计算机系统主要是由一个或者多个处理器,主存,硬盘,键盘,鼠标,显示器,打印机,网络接口及其他输入输出设备组成. 一般而言,现代计算机系统是一个复杂的系统. 其一:如果每位 ...
- Windows-kms
系统下载 Windows 长期服务版 Windows 10 Enterprise LTSC 2019 (x64) - DVD (Chinese-Simplified) 文件名 cn_windows_1 ...
- 11、JDBC-Druid
依赖 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...
- ACdream - 1060 递推数(矩阵+循环节)
https://vjudge.net/problem/71677/origin 已知A(0) = 0 , A(1) = 1 , A(n) = 3 * A(n-1) + A(n-2) (n ≥ 2) 求 ...
- logstash日志采集工具的安装部署
1.从官网下载安装包,并通过Xftp5上传到机器集群上 下载logstash-6.2.3.tar.gz版本,并通过Xftp5上传到hadoop机器集群的第一个节点node1上的/opt/uploads ...
- foreach循环详解
在Java1.5+中,foreach循环非常实用. public class Demo <T> implements Iterable<T>, Iterator<T& ...
- js 日期 相关
Js计算指定日期加上多少天.加多少月.加多少年的日期 function DateAdd(interval, number, date) { switch (interval) { case " ...
- Mac 建PHP 环境 及 配置 apache 默认目录
网上找的帮助,试一下,记录在此: 在Mac下配置php开发环境:Apache+php+MySql https://www.imooc.com/article/15705?block_id=tuiji ...