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

来源:Valmai17  时间:2017-11-23    阅读:   我要吐槽    阿里云幸运券

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

下面,我就整理一个小方法实现判断上传格式,大小,以及预览图片的功能,大大的减少了代码量。

思路:点击上传按钮(id=“PhotoFile”),选择文件,触发改变事件,调用base64data函数,调用完毕后,执行回调函数,把返回的base64数据分别赋值到img标签的src 和 隐藏的input 的value 上,这样就实现了图片的预览,并且把隐藏的inout 里面的 base64数据提交到后端就可以了。

html:

<div id="IDPhoto">
    <input id="PhotoFile" name="" type="file">
    <input hidden id="PhotoData" name="" type="text">
    <img class="PhotoImg" src="../images/IDPhotoBG.jpg">
</div>

方法:

$(document).ready(function(){

  $('body').on('change','#PhotoFile',function(event) {
      base64data("PhotoFile",function(data){
          $('#PhotoFile').siblings('.PhotoImg').attr('src',data);
          $('#PhotoFile').siblings('#PhotoData').val(data);
      });
  });
});

//图片转换base64数据
function base64data(fileID,clackFn){ //fileID:选取文件的ID,clackFn:回调函数,size:限制的大小(单位M)
    var size = arguments[2]?arguments[2]:3;
    var file = document.getElementById(fileID);
    var arr = ["gif","jpeg","jpg","png"];
    var size = 1024*1024*parseInt(size);
    var fileContentType = file.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //文件类型
    if (file.files && file.files[0]){
        var f_size = file.files[0].size;  //文件大小
        if(arr.join(',').toLowerCase().indexOf(fileContentType.toLowerCase()) != -1){  //检索上传的文件类型是不是在允许的arr数组之内
            if(f_size > size){
                alert("图片太大,请重新上传",'确定');
                file.value="";
                return false;
            }else {
                var reader = new FileReader();
                reader.onload = function(evt){
                    clackFn(evt.target.result);
                }
                reader.readAsDataURL(file.files[0]);
            }

        } else {
            alert("文件格式不匹配,请重新上传",'确定');
        }
    } else {  //兼容IE
        alert('请切到高级浏览器,再进行图片上传','确定');
    }
}

Tags:方法  数据  图片  base64  

参与讨论