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

时间：2024-01-23 20:08:30

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

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

    思路：点击上传按钮(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('请切到高级浏览器,再进行图片上传','确定');
    }
}

 

谢谢阅读，如果能帮到您，请帮忙顶一个，当然喜欢的可以收藏一下，谢谢！～(￣▽￣～)(～￣▽￣)～

注：转发请注明出处

相关文章