jquery简单图片上传校验预览

偶然想写一个百度ocr玩玩，想在前端获取到一个图片，然后post到后台提取图片文字，一通猛搜，都不是我想要的代码，于是乎总结了一下，取百家所长~完成了咱的设想，就像下面这样。

少废话，直接上码，注释很多，不解释~

<!DOCTYPE html>
<!-- thymeleaf模板，与本示例无关 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<title>首页</title>
</head>
<body>
	<h1>首页</h1>
	<a href="/hello">Hello</a><br/><br/><br/><br/>
	<form enctype="multipart/form-data" id="ocr-form" action="/ocr" method="post">
		文字识别：<input type="file" name="file" id="file1"><br/>
		描述： <input type="text" name="describe">
		<button id="upbtn">上传图片识别文字</button>
		<!-- 上传预览 -->
		<img id="img1" name="img1" src="" width="400" height="280">
	</form>
<script>	
//A.选择文件校验预览
$(function(){
	//开始的时候禁止按钮
	$("#upbtn").attr({"disabled":"disabled"});
	//在文件选择的时候触发的事件
    $("#file1").on("change",function(){
    	//使用类型判断浏览器是否支持base64转换
    	if (typeof (FileReader) === 'undefined') {
            alert("抱歉，你的浏览器不支持文件读取，请更新浏览器操作！");
        }else{
        	//000.获取文件
        	var file = this.files[0];
            var fileSize = this.files[0].size;	//文件大小
        	var size = fileSize / 1024*1024; 	//和上面那句一样1.5M约等于160 0000
        	//001.文件格式校验
        	if (!/image\/\w+/.test(file.type)) {
                alert("请确保文件为图像类型");
                //格式不对，就禁止上传操作【按钮禁用】
                $("#upbtn").attr({"disabled":"disabled"});
            }else if(size>1000000){
            	alert("上传图片大小不得大于1M");
            	return false;
            }else{
        		//002.上传图片预览
				if(this.files && file){
					var reader = new FileReader();
					reader.onload = function(e){
						//注：e.target.result就是图像的base64编码
						//如果有需要提取base64的话，在这里操作就十分简单~
						$("#img1").attr("src",e.target.result);
					}
					reader.readAsDataURL(file);
				}
        		//格式正确，允许上传【移除按钮禁用属性】
				$("#upbtn").removeAttr("disabled");
            }
        }
	});
});
//B.上传文件
$("#upbtn").click(function(){
	$.post("/ocr",{},function(data){});
});
</script>	
</body>
</html>

思考了很久，倒不是前端的问题，是纠结于传到后台是base64呢还是……emmm，是我想多了，最后直接提交的时候，后台java就一句话提取到了图像的二进制文件，顺带贴一下吧【PS：和上面无关】

@RequestMapping(value = "/ocr", method = RequestMethod.POST)
public String ocr(String describe,MultipartFile file) {
    byte[] buf = file.getBytes();    //就是这句话
}

幸好弄完了，就像下面这样子~

百度的人工智能接口还蛮有用的，大家可以尝试用它去做一些小玩意~

比如人脸识别啦、图像主体检测啦、等等~

传送门：百度云

jquery简单图片上传校验预览

猜你喜欢