html代码
<!--上传图片 --> <div class="content1"> <div class="content11 wrap"> <div> <span class="redred">*</span>身份证正面</div> <span id="ssfzm" style="font-size: 0.9em; color: red;">( <u>点击查看示例</u> )</span></div> <div class="content22"> <img id="type1_img" src="img/ico/gz/collecting_proof@2x.png" alt="" /> <input class="inputfile" type="file" id="input1" accept="image/*" onchange="ImageChange('input1','type1_img')"/> </div> </div>这里设置 input file 样式 为width:0 height:0 隐藏起来
点击图片 打开选择图片：
//点击上传图片 $(".content22").find("img").click(function(){ layer.open({ content: '正在启动' , skin: 'msg' , time: 1 //1秒后自动关闭 });//layer结束 return $(this).parent().find("input[type=file]").click(); //这里要特别注意 要加上return 启动文件选择器 });选择完后 进行上传
//上传图片 function ImageChange(inputname,imagename) { var filePath = $("#"+inputname).val(); //获取到input的value，里面是文件的路径 if(filePath.length>1) { //提示 $.showLoading("正在上传中"); var fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(); var imgBase64 = ''; //存储图片的imgBase64 var fileObj = document.getElementById(inputname).files[0]; //上传文件的对象,要这样写才行，用jquery写法获取不到对象 // 检查是否是图片 if( !fileFormat.match(/.png|.jpg|.jpeg/) ) { alert('上传错误,文件格式必须为：png/jpg/jpeg'); $.hideLoading(); return; } //使用reader 转换成base64 var reader=new FileReader(); reader.readAsDataURL(fileObj); reader.onload = function (e) { imgBase64=this.result; //使用图片 压缩 dealImage(imgBase64, 800, printing); function printing(base64) { //把得到的base64赋值到img标签显示 $("#"+imagename).attr("src",base64); $("#"+imagename).attr("value",base64); $.hideLoading(); //开始判断识别身份 if(imagename=="type1_img") { $.showLoading("正在识别图片"); // alert(base64); //这里把base64传递给后台 必须用post提交 get参数有长度限制 $.ajax({ url:"Tools/GetImageUrl.aspx", type:"post", data:{ServerID:base64}, success:function(data){ //识别身份证信息 $.get("Tools/GetCardInfo.aspx?FileName=" + data + "&m=" + Math.random(), function (data1) { $.hideLoading(); var CardInfo = data1.split(":"); var flag = CardInfo[0]; if (flag == "Success") { //读取成功了 var InfoList = CardInfo[1].split(","); $("#identification_no").val(trim(InfoList[1].toString())); $("#owner_name").val(trim(InfoList[0].toString())); $("#address").val(trim(InfoList[2].toString())); //提示 layer.open({ content: '识别成功' , skin: 'msg' , time: 1 //1秒后自动关闭 }); //layer结束 } else { //提示 layer.open({ content: '识别失败，请手工录入' , skin: 'msg' , time: 1 //2秒后自动关闭 }); //layer结束 //清空 $("#identification_no").val(""); $("#owner_name").val(""); $("#address").val(""); } }); //get结束 }, error:function(){ alert("识别图片失败"); } }); //ajax结束 }//if结束 }//压缩结束 } //reader结束 } } //压缩图片 function dealImage(base64, w, callback) { var newImage = new Image(); var quality = 0.6; //压缩系数0-1之间 newImage.src = base64; newImage.setAttribute("crossOrigin", 'Anonymous'); //url为外域时需要 var imgWidth, imgHeight; newImage.onload = function () { imgWidth = this.width; imgHeight = this.height; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); if (Math.max(imgWidth, imgHeight) > w) { if (imgWidth > imgHeight) { canvas.width = w; canvas.height = w * imgHeight / imgWidth; } else { canvas.height = w; canvas.width = w * imgWidth / imgHeight; } } else { canvas.width = imgWidth; canvas.height = imgHeight; quality = 0.6; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(this, 0, 0, canvas.width, canvas.height); var base64 = canvas.toDataURL("image/jpeg", quality); //压缩语句 // 如想确保图片压缩到自己想要的尺寸,如要求在50-150kb之间，请加以下语句，quality初始值根据情况自定 // while (base64.length / 1024 > 150) { // quality -= 0.01; // base64 = canvas.toDataURL("image/jpeg", quality); // } // 防止最后一次压缩低于最低尺寸，只要quality递减合理，无需考虑 // while (base64.length / 1024 < 50) { // quality += 0.001; // base64 = canvas.toDataURL("image/jpeg", quality); // } callback(base64);//必须通过回调函数返回，否则无法及时拿到该值 } }c# 后台接收部分
try { string ServerID = Request["ServerID"].ToString().Replace("\r\n",""); //base64格式的 后台处理 一定要从","之后开始 要把data:image 一些内容处理掉 否则会提示错误 切记 ServerID = ServerID.Substring(ServerID.IndexOf(',')+1); byte[] bt = Convert.FromBase64String(ServerID);//获取图片base64 Random rd=new Random(); string fileName = Guid.NewGuid().ToString("N")+".jpg"; string ImageFilePath = GetPath(fileName); File.WriteAllBytes(ImageFilePath, bt); //保存图片到服务器，然后获取路径 Response.Write(fileName); } catch{} //用到的getpath /// <summary> /// 保存图片地址 /// </summary> /// <param name="fileName"></param> /// <returns></returns> private string GetPath(string fileName) { string path = "img\\";//写上地址 path = Server.MapPath(path); if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } path += fileName.Replace(".jpg","") + ".jpg"; return path; }