效果图
这里主要说的事身份证的压缩上传
3MB的照片，前端压缩之后为100kb左右。
主要功能：等比例压缩
参考文献：https://blog.csdn.net/qq_35393869/article/details/80924812
https://blog.csdn.net/hu1991die/article/details/40585581
关键插件LocalResizeIMG。js
主要思路，前台图片转base64字符串到后台
引用js
<script type="text/javascript" src="~/Content/CommonModule/TMobileInfo/jquery-3.js"></script>
<script src="~/Content/CommonModule/TMobileInfo/mobileFix.js"></script>
<script src="~/Content/CommonModule/TMobileInfo/exif.js"></script>
<script src="~/Content/CommonModule/TMobileInfo/lrz.js"></script>
上面最后3个js引用来自
http://www.jq22.com/demo/localResizeIMG-150611201739/src/demo/index.html
上面js来自
上代码
<div id="pageView2" style="margin-top:20px;display:none;">
<input type="file" accept="image/*" id="file1" style="display:none;" onchange="filechange(event)">
<div onclick="document.getElementById('file1').click()" style="width:80%;height:150px;margin:0px auto;border-radius:5px;border:dashed 2px #4d4d4d;">
<p style="text-align:center;color:#4d4d4d;font-size:20px; margin-top:30px;">正面</p>
<p style="text-align:center;color:#4d4d4d;">点击上传身份证正面照片</p>
</div>
<div style="height:20px;"></div>
<input type="file" accept="image/*" id="file2" style="display:none;" onchange="filechange(event)">
<div onclick="document.getElementById('file2').click()" style="width:80%;height:150px;margin:0px auto;border-radius:5px;border:dashed 2px #4d4d4d;">
<p style="text-align:center;color:#4d4d4d;font-size:20px; margin-top:30px;">反面</p>
<p style="text-align:center;color:#4d4d4d;">点击上传身份证反面照片</p>
</div>
<div class="weui_btn_area"><button class="weui_btn weui_btn_primary weui_btn_disabled" style="background-color:#F65A29;" id="btnSubmitIDCart" disabled="disabled" type="button" onclick="checkIDCart(this);">下一步</button> </div>
<table style="font-size:12px;margin-left:10px;margin-right:10px;">
<tr>
<td>
注：请上传真实身份信息，边角无遮挡，信息清晰可见
</td>
</tr>
</table>
</div>
//注册图片选择事件
$("[type='file']").change(function (event) {
filechange(event)
});
//选择图片
var fileBase64ZM;
var fileBase64FM;
var fileBase64SC;
var fileBase64GZ;
function filechange(event) {
var files = event.target.files, file;
if (files && files.length > 0) {
$("#toast").show().find(".weui-toast__content").text("图片压缩中...");
// 获取目前上传的文件
file = files[0];// 文件大小校验的动作
var image = new Image();
// 获取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
var imgURL = URL.createObjectURL(file);
var MAX_WH = 800;
image.onload = function () {
if (image.height > MAX_WH) {
// 宽度等比例缩放 *=
image.width *= MAX_WH / image.height;
image.height = MAX_WH;
}
if (image.width > MAX_WH) {
// 宽度等比例缩放 *=
image.height *= MAX_WH / image.width;
image.width = MAX_WH;
}
lrz(file, { width: image.width, height: image.height }, function (results) {
$("#toast").hide();
var fid = $(event.target).attr("id");
if (fid == "file1") {
fileBase64ZM = results.base64;
}
if (fid == "file2") {
fileBase64FM = results.base64;
}
if (fid == "file3") {
fileBase64SC = results.base64;
}
if (fid == "file4") {
fileBase64GZ = results.base64;
}
$(event.target).next().html("<img src='" + results.base64 + "' style='width:100%;height:100%;'/>");
//下一步验证按钮
idCartBtnState();
});
};
image.src = imgURL;
}
};
后台
/// <summary>
/// 验证身份证
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult CheckIDCart(string phoneNumber, string fileBase64ZM,string fileBase64FM)
{
bool result = false;
string msg = "";
string data = "";
string path1 = "";
string path2 = "";
try
{
var mobileInfo = mobileInfoBll.GetByPhoneNumber(phoneNumber);
if (mobileInfo != null && mobileInfo.ID != null)
{
Bitmap file1 = new Bitmap(new System.IO.MemoryStream(Convert.FromBase64String(Server.UrlDecode(fileBase64ZM).Replace("data:image/jpeg;base64,", ""))));
Bitmap file2 = new Bitmap(new System.IO.MemoryStream(Convert.FromBase64String(Server.UrlDecode(fileBase64FM).Replace("data:image/jpeg;base64,", ""))));
string extent = ".png";
//正面
path1 = "/Content/UploadFile/TMobileInfo/" + CommonHelper.GetGuid + extent;
//反面
path2 = "/Content/UploadFile/TMobileInfo/" + CommonHelper.GetGuid + extent;
file1.Save(Server.MapPath("~" + path1));
file2.Save(Server.MapPath("~" + path2));
mobileInfo.PositiveImg = path1;
mobileInfo.SideImg = path2;
#region 阿里接口返回结果
string ret = ExecIDCartApi(Server.MapPath("~" + path1), true);
if (ret.Contains("true"))
{
data = ret;
mobileInfo.PositiveImgAPI = ret;
}
else
{
throw new Exception("ER正面识别失败");
}
ret = ExecIDCartApi(Server.MapPath("~" + path2), false);
if (ret.Contains("true"))
{
mobileInfo.SideImgAPI = ret;
}
else
{
throw new Exception("ER反面识别失败");
}
#endregion
if (mobileInfoBll.UpdateIDCart(mobileInfo))
{
result = true;
msg = "验证成功通过";
}
else
{
msg = "系统繁忙，请稍候再试";
}
}
else
{
msg = "手机号不在系统中";
}
}
catch (Exception ex)
{
if (ex.Message.Contains("ER"))
{
msg = ex.Message.Replace("ER", "");
}
else
{
msg = "系统繁忙，请稍候再试";
}
Base_SysLogBll.Instance.WriteLog("", OperationType.Query, "-1", "异常错误：" + ex.Message);
}
if (result == false)
{
#region 删除文件
if (System.IO.File.Exists(Server.MapPath("~" + path1)))
{
System.IO.File.Delete(Server.MapPath("~" + path1));
}
if (System.IO.File.Exists(Server.MapPath("~" + path2)))
{
System.IO.File.Delete(Server.MapPath("~" + path2));
}
#endregion
}
var JsonData = new
{
result = result,
msg = msg,
data = data
};
return Content(JsonData.ToJson());
}