<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>
评论0