wchl4000 2024-03-25 09:44 采纳率: 0%
浏览 2
已结题

手写签名图片存服务器

手写签名图片存服务器路径入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
%>


  • 写回答

3条回答 默认 最新

  • 码农阿豪@新空间代码工作室 Java领域优质创作者 2024-03-25 09:44
    关注
    让阿豪来帮你解答,本回答参考chatgpt3.5编写提供,如果还有疑问可以评论或留言
    针对这个问题,需要修改签名xj.asp代码,将图片保存到服务器的IMG目录下,并将文件路径和文件名存储到数据库的xj_qm字段中。代码可以按照以下步骤进行修改:
    1. 首先获取上传文件,并将文件保存到服务器的IMG目录下,文件名为"ID_Date.now()"格式。可以使用以下代码实现:
    '获取上传文件
    Set MyUpload = New clsUpload
    MyUpload.Upload( Request , Server.MapPath("upload/") )
    '判断上传文件是否成功
    If MyUpload.Uploaded(0, "Filedata") Then
        '设置图片名字为ID_Date.now()
        imgName = Request("ID") & "_" & FormatDateTime(now, 4) & ".jpg"
        MyUpload.Files(0).SaveAs Server.MapPath("IMG/" & imgName)
    End If
    
    1. 将文件路径和文件名保存到数据库的xj_qm字段中。可以使用以下代码实现:
    '将文件路径和文件名保存到数据库的xj_qm字段中
    Set conn = Server.CreateObject("ADODB.Connection")
    conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("xj.mdb")
    sql = "update xj set xj_qm='" & imgName & "' where ID=" & Request("ID")
    conn.Execute sql
    conn.Close
    

    经过修改后的签名xj.asp完整代码如下:

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <!-- #include file="clsUpload.asp"-->
    <!-- #include file="ancel.asp"-->
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>手写签名</title>
            <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no">
            <meta name="format-detection" content="telephone=no" />
            <meta http-equiv="Cache-Control" content="no-cache,no-store,must-revalidate">
            <meta http-equiv="Pragma" content="no-cache">
            <meta http-equiv="Expires" content="0">
            <link href="css/index.css" rel="stylesheet" type="text/css"/>
        </head>
        <body>
            <div id="canvas-warp">
                <canvas id="canvas"></canvas>
                <ul>
                    <li><input class="save" type="button" value="保存"/>
                        <input class="clear" type="button" value="清除"/>
                    </li>
                    <li>
                        <a id="close" href="#">关闭</a>
                    </li>
                </ul>
            </div>
            <div class="yc">
                <p>签名已保存,请查收!</p>
                <input class="index" type="button" value="返回" onclick="javascript:location.href='index.asp'"/>
            </div>
            <div id="btn-warp">
                <button id="signBtn">手写签名</button>
            </div>
            <script type="text/javascript" src="js/zepto.min.js"></script>
            <script type="text/javascript">
                window.onload = function () {
                    var bihua = 0;
                    var myCancel = new Anco();
                    myCancel.width = window.innerWidth;
                    myCancel.height = window.innerHeight;
                    myCancel.setConfig({
                        strokeWidth: 5,
                        strokeColor: "#000",
                        endFn: function (base64, cxt) {
                            console.log(base64);
                            cxt.clearRect(0, 0, this.width, this.height);
                            if (bihua == 0) {
                                alert("签名不能为空");
                                return;
                            }
                            //保存图片到服务器,并将文件路径和文件名保存到数据库的xj_qm字段中
                            $.ajax({
                                type: "post",
                                url: "save.asp",
                                data: { ID: '<%=Request("ID")%>' },
                                dataType: "text",
                                success: function(result){
                                    alert(result); //签名保存成功
                                },
                                error:function(){
                                  alert("保存失败!");
                                }
                            });
                        }
                    });
                    $("#signBtn").on("click", function () {
                        myCancel.show();
                    });
                }
            </script>
        </body>
    </html>
    

    经过修改后的save.asp完整代码如下:

    <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
    <!-- #include file="clsUpload.asp"-->
    <!-- #include file="ancel.asp"-->
    <%
      '获取上传文件
      Set MyUpload = New clsUpload
      MyUpload.Upload( Request , Server.MapPath("upload/") )
      '判断上传文件是否成功
      If MyUpload.Uploaded(0, "Filedata") Then
          '设置图片名字为ID_Date.now()
          imgName = Request("ID") & "_" & FormatDateTime(now, 4) & ".jpg"
          MyUpload.Files(0).SaveAs Server.MapPath("IMG/" & imgName)
          '将文件路径和文件名保存到数据库的xj_qm字段中
          Set conn = Server.CreateObject("ADODB.Connection")
          conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("xj.mdb")
          sql = "update xj set xj_qm='" & imgName & "' where ID=" & Request("ID")
          conn.Execute sql
          conn.Close
          Response.Write "签名保存成功"
      Else
          Response.Write "签名保存失败"
      End If
    %>
    
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 3月28日
  • 修改了问题 3月25日
  • 创建了问题 3月25日

悬赏问题

  • ¥15 数据库原理及应用上机练习题
  • ¥30 征集Python提取PDF文字属性的代码
  • ¥15 如何联系真正的开发者而非公司
  • ¥15 有偿求苍穹外卖环境配置
  • ¥15 代码在keil5里变成了这样怎么办啊,文件图像也变了,
  • ¥20 Ue4.26打包win64bit报错,如何解决?(语言-c++)
  • ¥15 clousx6整点报时指令怎么写
  • ¥30 远程帮我安装软件及库文件
  • ¥15 关于#自动化#的问题:如何通过电脑控制多相机同步拍照或摄影(相机或者摄影模组数量大于60),并将所有采集的照片或视频以一定编码规则存放至规定电脑文件夹内
  • ¥20 深信服vpn-2050这台设备如何配置才能成功联网?