语言吧技术网欢迎您投稿,程序员的世界我懂你!=====>点此登录投搞
当前位置: 首页 >>前端技术 >>HTML5 >>HTML页面转换base64编码图片,点击div的时候选择文件

HTML页面转换base64编码图片,点击div的时候选择文件

2019/3/6 23:36:40 0人评论 346次 作者:admin

有时候我们希望文件上传的时候预览图片,下面插件可以实现上传前预览图片 (也可以提取文件的base64编码),max-height: 140px;max-width: 120px;可以指定图片的最大宽度和高度…

有时候我们希望文件上传的时候预览图片,下面插件可以实现上传前预览图片 (也可以提取文件的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');


CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com
欢迎【广东省 广州市】的朋友
内容与素材部分来源于网络,如有侵权请告知删除
分享按钮