有时候我们希望文件上传的时候预览图片，下面插件可以实现上传前预览图片 (也可以提取文件的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的时候选择文件的更多相关文章

  1. 图片转换base64数据上传，并且实现预览的简便方法

    对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插件的话,会使得项目的资源空间 ...

  2. 字符串与图片的Base64编码转换操作

    //图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = ne ...

  3. 图片和base64编码字符串 互相转换，图片和byte数组互相转换

    图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; ...

  4. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  5. 用javascript实现base64编码器以及图片的base64编码

    前面的话 base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用 ...

  6. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  7. HTML5之图片转base64编码

    之前在群里看到很多小哥哥小姐姐讨论关于图片base64互转的方法,刚好我之前用到的一个方法给大家分享一下. <!Doctype html><html> <head> ...

  8. H5 Js图片转base64编码

    <!Doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. http://imgbase64.duoshitong.com/ 图片转换 base64

    base64图片工具介绍: 1.支持 PNG.GIF.JPG.BMP.ICO 格式. 2.将图片转换为Base64编码,可以让你很方便地在没有上传文件的条件下将图片插入其它的网页.编辑器中. 这对于一 ...

随机推荐

  1. xp与win7双系统时删除win7启动菜单

    1.提取Win7安装光盘中,boot目录下的[bootsect.exe]到其它盘中,备用! 2 2.启动到WinXP或者WinPE或者Dos中,只要是能执行dos命令的地方就可以 3 3.cmd下进入 ...

  2. Luogu P1251 餐巾计划问题

    题目链接 \(Click\) \(Here\) 看到其他人都是用费用流写的,我只能表示:动什么脑子?暴力就完事了! 嗯,这个题应该是一个相当显然的上下界最小费用可行流模型,所以跑就完事了. \(s - ...

  3. Hibernate的入门(概念1):

    什么是持久化类? 持久化类的编写规则? 区分自然主键和代理主键? 主键生成策略?

  4. CodeForces621E 快速矩阵幂优化dp

    有时些候在用快速矩阵幂优化dp的时候,它的矩阵乘法是不那么容易被具体为题目背景的意思的,大多数时候难以理解矩阵之间相乘的实际意义,正如有时候我们不知道现在在做手头这些事情的意义,但倘若是因一个目标而去 ...

  5. 信用评分卡 (part 6 of 7)

    python信用评分卡(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_camp ...

  6. 字符设备驱动(六)按键poll机制

    title: 字符设备驱动(六)按键poll机制 tags: linux date: 2018-11-23 18:57:40 toc: true --- 字符设备驱动(六)按键poll机制 引入 在字 ...

  7. SQL语法基础之ALTER语句

    SQL语法基础之ALTER语句 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看ALTER的帮助信息 mysql> ? ALTER Many help items fo ...

  8. java程序员常用的linux命令

    作为一个java后端开发者,在日常工作中肯定会有和linux打交道的时候.下面我整理了一些开发中可能需要用到的一些命令(写这篇随笔前,我也没有什么操作经验,主要防止自己忘记这些操作命令,以后有用到新的 ...

  9. JAVA核心技术I---JAVA基础知识（集合set）

    一:集合了解 (一)确定性,互异性,无序性 确定性:对任意对象都能判定其是否属于某一个集合 互异性:集合内每个元素都是无差异的,注意是内容差异 无序性:集合内的顺序无关 (二)集合接口HashSet, ...

  10. VirtualBox虚拟机中安装XP系统

    Windows XP是一款经典的操作系统,同时也是一款很老的操作系统,不过尽管如此,还是有一批用户在使用XP系统,所以发行一些软件的时候还是要测试在XP系统中能否运行,这时候我们就可以借助Virtua ...