图片转换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('请切到高级浏览器,再进行图片上传','确定'); } }

 

谢谢阅读,如果能帮到您,请帮忙顶一个,当然喜欢的可以收藏一下,谢谢!~( ̄▽ ̄~)(~ ̄▽ ̄)~

注:转发请注明出处