首页 新闻 会员 周边

手写签名图片存服务器路径入access数据库问题

0
悬赏园豆：5 [待解决问题]

工作需要，asp+access建了个简单信息交互平台，需要在手机上手写签名存档，原是Base64直接入数据库，经过实践，数据太大，想改为图片存服务器IMG目录下，文件名最好是“ID_Date.now()”，路径及文件名入库“xj”表“xj_qm”字段里。我是菜鸟，不知怎么改，请高手帮忙改改代码。
数据库名：xj 表名:xj 表结构：ID自动编号，xj_qm短文本，用于记录签名图片的路径和文件名，还有几个表单项。

签名代码如下：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!-- #include file="anco.asp"-->

<%
set rs = server.CreateObject("adodb.recordset")
sql = "select * from xj"
rs.open sql,conn,1,3
rs.addnew
rs("xj_name") = Trim(Request.Form("xj_name"))
rs("special") = Trim(Request.Form("special"))
rs("grade") = Trim(Request.Form("grade"))
rs.update
hid = rs("xj_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

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='xj.asp?id=<%=xj_id%>'">查看您的签名</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.asp',
		data: {id:<%=hid%>,c_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
%>

wchl的主页 wchl | 初学一级 | 园豆：199
提问于：2024-03-20 15:09
< >
分享
所有回答(2)
0

经过近半月的折腾，问题终于解决。先是把问题想复杂了。是在原base64能直接入库的基础上优化。说明ajax提交的数据是成功的。只是把入库的base64数据改成图片文件存服务器的一个指定目录、数据库只加入链接就行了。所以只需要修改入库文件ajax_cscxj.asp即可。其它文件都不需要改变。
修改ajax_cscxj.asp后的代码：

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!-- #include file="conn.asp"-->
<%
id = int(Request.form("id"))
id = Right("0000" & id, 4) ' 格式化为4位数，不足部分用0填充
FileName =id & "_" & DatePart("yyyy", Now()) & DatePart("m", Now()) & DatePart("d", Now()) &  "_" & DatePart("h", Now()) & DatePart("n", Now()) & DatePart("s", Now())   '生成文件名
pict=Trim(request.Form("qm_pic"))		'获取Form提交过来的img
'分割字符串  base64 找到文件扩展名 picl(1) 
picn=split(pict,";base64,")	
picl=split(picn(0),"/")
picture=picn(1)

'response.write picn(1)
'response.write "<br>"
path="UploadIMG_cscxj/" & FileName & "."&picl(1)  '存放路径

xmlstr="<data>"&picture&"</data>"
Dim xml : Set xml=Server.CreateObject("MSXML2.DOMDocument")
Dim stm : Set stm=Server.CreateObject("ADODB.Stream")
xml.resolveExternals=False
xml.loadxml(xmlstr)
xml.documentElement.setAttribute "xmlns:dt","urn:schemas-microsoft-com:datatypes"
xml.documentElement.dataType = "bin.base64"
stm.Type= 1'adTypeBinary
stm.Open
stm.Write xml.documentElement.nodeTypedValue
stm.SaveToFile Server.MapPath(path)
stm.Close
Set xml=Nothing
Set stm=Nothing
' 更新数据库，存储图片路径
set rs = server.CreateObject("adodb.recordset")
sql = "select * from [jccscxj] where cscxj_id = "&id&""
rs.open sql,conn,1,3
	rs("cscxj_qm") = path
rs.update
rs.Close
Set rs = Nothing
response.Write("签名成功")

conn.close
set conn=nothing
%>

参考文章：https://blog.csdn.net/u011289462/article/details/128058690

wchl | 园豆：199 (初学一级) | 2024-03-28 14:29
0

数据库只能存字符串跟数字之类的
图片要上传到磁盘，应该是有api 可以 bing 搜索一下

草丛有头猪 | 园豆：210 (菜鸟二级) | 2024-04-04 18:47
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。