前端图片转base64

<link rel="stylesheet" type="text/css" href="convertImgBase64/webuploader.css"/> <script type="text/javascript" src="convertImgBase64/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="convertImgBase64/webuploader.custom.min.js"></script> <script type="text/javascript" src="convertImgBase64/FeilChooseOfBase64.js"></script> <div id="IdCardFrontBtn" style="border:1px solid #999;text-align:center;line-height:45px;width:120px; height:45px;">选择文件</div> <br/> <div id="show" style="border:1px solid #f00; width:400px;height:500px;"></div> <script type="text/javascript"> /* 此处使用WebUploader提供的功能来获得base64码,然后将base64码通过img标签提供的文件头来解析base64达到预览的功能 使用了这个插件,就不能通过二进制流的方式上传了, 只能通过获得的base64码来传输; 后台接受到了base64解密成byte数组即可, 异步上传则自己写ajax将base64传输过去 WebUploader插件的文档 如有需要自行修改 http://fex.baidu.com/webuploader/getting-started.html */ $(document).ready(function(){ /** 直接绑定到文件选择按钮上面, **/ FileChooseOfBase64("#IdCardFrontBtn",function(file,src,error){ if(error){ //选择正确图片 return ; } //判断文件类型 if(!(file.type=='image/jpg'||file.type=='image/jpeg'||file.type=='image/png')){ alert("请上传jpg,png格式的图片！") return ; } //判断文件大小 if(file.size>1024*1024*50){ alert("图片过大，请上传50M以内的图片 ！") return ; } var imgsrc='data:'+file.type+';base64,'+src $("#show").html('图片名称:'+file.name+'<br/>图片类型'+file.type+':<br/>图片预览:<br/><img src="'+imgsrc+'"/ style="max-width:400px;"><br/>') }) }) </script>