手写签名图片存服务器路径入access数据库问题?
工作需要,asp+access建了个简单信息交互平台,需要在手机上手写签名存档,原是Base64直接入数据库,经过实践,数据太大,想改为图片存服务器IMG目录下,文件名最好是“ID_Date.now()”,路径及文件名入库“xj”表“xj_qm”字段里。我是初学者,不知怎么改,请帮忙改改代码。
数据库名:xj 表名:xj 表结构:ID自动编号,xj_qm短文本,用于记录签名图片的路径和文件名,还有几个表单项。
签名xj.asp代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%Session.CodePage=65001%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<TITLE>手写签名</TITLE>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/layer_mobile/layer.js"></script>
<style type="text/css">
#canvas{width:100%; height:200px; border:2px solid #0099FF; margin:0 auto; box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box;}
#canvas canvas{
display: block;
}
.save{height:50px; overflow:hidden; margin:0 auto; margin-top:10px; }
#clearCanvas{
float:left;
width: 49%;
height: 50px;
line-height: 50px;
text-align: center;
z-index: 1;
background-color:#0066FF;
font-size:16px;
color:#FFFFFF;
}
#saveCanvas{
float:right;
width: 49%;
height: 50px;
line-height: 50px;
text-align: center;
z-index: 1;
background-color:#FF0000;
font-size:16px;
color:#FFFFFF;
}
h5{ height:40px; line-height:40px; background-color:#CCCCCC; color:#333333; text-align:center}
.yc{ margin-top:30px; display:none}
</style>
</head>
<body>
<div id="canvas"></div>
<h5>请在上方蓝框内手写您的姓名</h5>
<div class="save">
<p id="clearCanvas">清除重写</p>
<p id="saveCanvas">提交签名</p>
</div>
<div style="text-align:center; margin-top:30px; font-size:18px; font-weight:bold" id="anco"></div>
<div class="main_90 yc">
<button type="submit" class="red_save" onClick="window.location.href='cscxjck.asp?id=<%=hid%>'">查看(核对)您填报的小结</button>
</div>
<script type="text/javascript">
window.onload = function() {
bihua=0;
new lineCanvas({
el: document.getElementById("canvas"),//绘制canvas的父级div
clearEl: document.getElementById("clearCanvas"),//清除按钮
saveEl: document.getElementById("saveCanvas"),//保存按钮
linewidth:2,//线条粗细,选填
color:"black",//线条颜色,选填
background:"#ffffff"//线条背景,选填
});
};
function lineCanvas(obj) {
this.linewidth = 1;
this.color = "#000000";
this.background = "#ffffff";
for (var i in obj) {
this[i] = obj[i];
};
this.canvas = document.createElement("canvas");
this.el.appendChild(this.canvas);
this.cxt = this.canvas.getContext("2d");
this.canvas.width = this.el.clientWidth;
this.canvas.height = this.el.clientHeight;
this.cxt.fillStyle = this.background;
this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
this.cxt.strokeStyle = this.color;
this.cxt.lineWidth = this.linewidth;
this.cxt.lineCap = "round";
//开始绘制
this.canvas.addEventListener("touchstart", function(e) {
event.preventDefault();// 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
this.cxt.beginPath();
this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}.bind(this), false);
//绘制中
this.canvas.addEventListener("touchmove", function(e) {
event.preventDefault();// 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
this.cxt.stroke();
}.bind(this), false);
//结束绘制
this.canvas.addEventListener("touchend", function() {
bihua++;
event.preventDefault();// 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
this.cxt.closePath();
}.bind(this), false);
//清除画布
this.clearEl.addEventListener("click", function() {
bihua=0;
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
}.bind(this), false);
//保存图片,直接转base64
this.saveEl.addEventListener("click", function() {
//alert(bihua);
if (bihua == 0) {
alert("签名不能为空");
return;
};
var imgBase64 = this.canvas.toDataURL();
console.log(imgBase64);
//下面开始ajax入库
$.ajax({
type:"post",
//也可以是带action的url:'save.asp?action=save',
url:'ajax-cscxj.asp',
data: {id:<%=hid%>,qm_pic:imgBase64},
dataType:'text',// dataType:"html",//服务器返回的数据类型。
timeout:10000,//10秒通信超时
beforeSend:function(xhr){
// alert('ajax通信,将信息post出去请稍等');或是放loding等待提示
layer.open({type: 2});//等待提示层
},
success:function(ywx){//请求成功,得到返回信息
//提示弹窗alert(ywx);
layer.closeAll();//很成功,关闭等待提示层
layer.open({content: ywx,skin: 'msg',time: 2});//提示弹窗
$("#canvas").hide();
$("h5").hide();
$(".yc").show();
$(".save").hide();
$("#anco").html(ywx);
},//success结束
error:function(xhr){//请求出错,
//alert('ajax通信异常,请稍后再试');
layer.closeAll();//关闭等待提示层
layer.open({
content: 'ajax通信异常,请稍后再试'
,skin: 'msg'
,time: 2 //2秒后自动关闭
});
},
});
//ajax_end
//alert("ok");
}.bind(this), false);
};
</script>
<%
conn.close
set conn=nothing
%>
</body>
</html>
ajax.asp代码如下:
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!-- #include file="anco.asp"-->
<%
id = int(Request.form("id"))
c_qm_pic =Trim(Request.form("c_qm_pic"))
set rs = server.CreateObject("adodb.recordset")
sql = "select * from [xj] where xj_id = "&id&""
rs.open sql,conn,1,3
rs("xj_qm") = request.Form("c_qm_pic")
rs.update
rs.Close
Set rs = Nothing
response.Write("签收成功")
conn.close
set conn=nothing
%>