工作需要，asp+access建了个简单信息交互平台，表单填报、签名、及查看只能在手机上进行。已实现Base64直接入数据库。有Jccscxj.asp(首页表单填报)、Jccscxjup.asp(手写签名页面)、ajax-cscxj.asp(入库页面)、anco.asp(数据库联接)、cscxjck.asp(填报项查看)等五个asp文件、jcxj.mdb数据库和相关格式JS、css文件。实现步骤：首页填报各项表单-->进入签名页面-->提交签名显示签名结果。经过实践，Base64入库数据太大，想进行优化改进。我是一个初学者，请专家帮忙（薄礼）在我给出的代码中优化改进一下。优化改进要求：
1.对苹果系统兼容。
2.签名数据以图片格式，“ID_Date.now().jpg”命名，上传到服务器IMG目录下。
3.路径及文件名入库“jccscxj”表“cscxj_qm”字段里。access2000数据库名：jcxj 表名:jccscxj 表结构：ID自动编号，cscxj_qm短文本，用于记录签名图片的路径和文件名，还有几个表单项。
首页表单填报Jccscxj.asp代码：
<!--#include file="conn.asp" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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" />
<style type="text/css">
<!--
.STYLE1 {
font-size: 20px;
color: #0000ff;
font-weight: bold;
}
.STYLE2 {
font-size: 22px;
color: #ff0000;
font-weight: bold;
}
-->
</style>
</head>
<body>
<form name="form1" action="jccscxjup.asp" method="post" onSubmit="return IsValid();">
<table align="center" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr height="10"><td align="center" colspan="2"></td></tr>
<tr>
<td bgcolor="#F2FDFF" align="center" width="100%" colspan="2"><p><span class="STYLE2"><b>测试场小结</b></span></p></td>
</tr>
<tr height="20"><td align="center" colspan="2"></td></tr>
<tr>
<td align="right" width="30%">情况小结：</td>
<td align="left" width="70%"><textarea name="cscxjqkxj" id="cscxjqkxj" style="height:70px;width:90%;"></textarea></td>
</tr>
<tr height="15"><td align="center" colspan="2"></td></tr>
<tr>
<td align="right" width="30%">工作建议：</td>
<td align="left" width="70%"><textarea name="cscxjgzjy" id="cscxjgzjy" style="height:80px;width:90%;"></textarea></td>
</tr>
<tr height="15"><td align="center" colspan="2"></td></tr>
<tr>
<td align="right" width="30%">测试场主任姓名：</td>
<td align="left" width="70%"><input type="text" name="cscxjname" id="cscxjname" style="height:30px;width:90%;"></td>
</tr>
<tr height="15"><td align="center" colspan="2"></td></tr>
<tr>
<td align="right" width="30%"></td>
<td align="left" width="70%"><div align="center" class="mt30"><input type="submit" name="submit" value="去签名" class="bnt_save" style="width:80%;"></div></td>
</tr>
<tr height="20"><td align="center" colspan="2"></td></tr>
</table>
</form>
</body>
</html>
手写签名页Jccscxjup.asp代码：
<!--#include file="conn.asp" -->
<%
set rs = server.CreateObject("adodb.recordset")
sql = "select * from Jccscxj"
rs.open sql,conn,1,3
rs.addnew
rs("cscxj_qkxj")=Trim(Request.Form("cscxjqkxj"))
rs("cscxj_gzjy")=Trim(Request.Form("cscxjgzjy"))
rs("cscxj_name")=Trim(Request.Form("cscxjname"))
rs.update
hid = rs("cscxj_id")
rs.close
set rs=nothing
%>
<!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-cscxj.asp代码：
<!-- #include file="conn.asp"-->
<%
id = int(Request.form("id"))
qm_pic =Trim(Request.form("qm_pic"))
set rs = server.CreateObject("adodb.recordset")
sql = "select * from [jccscxj] where cscxj_id = "&id&""
rs.open sql,conn,1,3
rs("cscxj_qm") = request.Form("qm_pic")
rs.update
rs.Close
Set rs = Nothing
response.Write("签名成功")
conn.close
set conn=nothing
%>
填报项查看cscxjck.asp代码：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!-- #include file="conn.asp"-->
<%
id = int(Request.QueryString("id"))
Set Rs = Conn.Execute("Select * From jccscxj Where cscxj_id="&id&"")
If rs.EOF Then
response.Write "内容不存在"
response.End()
end if
%>
<!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=5.0,user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<TITLE>查看测试场小结</TITLE>
<link rel="stylesheet" type="text/css" href="css/css.css" />
</head>
<body>
<table id="anco" align="center" width="90%" border="0" cellpadding="0" cellspacing="0">
<tr height="20"><td></td></tr>
<tr>
<td align="center" width="90%"><p><span class="STYLE2"><b>测试室场小结</b></span></p></td>
</tr>
<tr height="30"><td></td></tr>
.....
<tr height="60"><td align="left"> <font color="#008000"><b>监测场主任签名</b></font>：<img src="<%=rs("cscxj_qm")%>"width="20%" height="" style="vertical-align:middle"></td></tr>
......
</table>
<%
rs.close
set rs=nothing
%>
<%
conn.close
set conn=nothing
%>
</body>
</html>
