第五天：jQuery实现图片转base64及上传

有的试题是带有图片的，需要实现图片上传功能。考虑到试题中使用图片的并不多，因此，决定将图片转成Base64形式并以BLOB类型保存到数据库中。

(一)准备

• 在试题表增加image列，BLOB类型
• 下载jquery-2.2.3.min.js，放到js目录下

(二)开发

JS代码：

$(function(){
        $("#img_upload_file1").change(function() {  
                var file = this.files[0];  
                var reader = new FileReader();  
                reader.readAsDataURL(file);//调用自带方法进行转换  
                reader.onload = function(e) {  
                    $("#img_upload_show").attr("src", this.result);//将转换后的编码存入src完成预览  
                    $("#img_upload_base").val(this.result);//将转换后的编码保存到input供后台使用  
                    // alert(this.result);
                    var img=$("#img_upload_base").val();
                    // var imgType=img.Substring(0,i)
                    var imgNum = img.split(";base64,");
                    var imgBase=imgNum[1];
                    // alert(img);
                    // alert(imgBase);
                    $(".FloatingBox").show();
                    $(".PullOutFloatingMain").show();
                    $(".PullOut_p11").html("正在上传识别");
                    $(".PullOut_p12").html("正在上传识别");
                    // location.href = "shootFront.html";
 
                    $.ajax({  
                        url: "ddddd",
                        type: "post",
                        dataType: 'json',
                        contentType : 'application/json;charset=utf-8',
                        data: JSON.stringify({
                                "application":"jtyh", //应用类型
                                "image":imgBase,       //身份证图片base64编码字符串
                                "imageName":"cdf.jpg", //图片名称  比如用户ID
                                "legality":"1"//身份证合法性性校验标志 "1":校验 "0":不校验
                              }),
                        success: function (data) {
                            // alert(data);
                            $(".FloatingBox").hide();
                            $(".PullOutFloatingMain").hide();
                            // location.href = "shootFront.html";
                            // location.href="shootFront.html?imgBase="+imgBase;//发送txt里面的内容
                            // alert(data.data.name);
                            var idName=data.data.name;
                            var idenID=data.data.id_card_number;
                            // alert(data.data.side);
                            // alert(idenID);
                            if(idName==undefined||idName==""){
                                // alert('fail');
                                $(".FloatingBox").show();
                                $(".pictureAndVideoFloatingMain").show();
                                $(".pictureAndVideo_p11").html("拍摄面不符");
                                $(".pictureAndVideo_p12").html("请拍摄身份证人像面");
 
                            }else{
                                $(".identifyName").val(idName);
                                $(".identifyID").val(idenID);
                                 setCookie("idName",idName,1);
                                 setCookie("idenID",idenID,1);
                                // alert(data.code);
                                // alert(data.msg);
                                // alert(data.data.name);
                                // alert(data.data.id_card_number);
                                $('.shootFront_a12').attr('href','shootReverse.html');
                            }   
                        }
                    });   
                };    
        });
    });

参考：https://blog.youkuaiyun.com/cccdf_jjj/article/details/78813605

(三)思考题
     

当前考试系统主要为两大模块

• 系统功能

1. 登录

• 试题管理

1. 查询(分页)
2. 新增(图片上传)

目前已经能够实现一题一空(即一个题干对应一个题目)的考试功能。现在的问题是：像软考这样偶尔出现一题两空(即一个题干对应两个题目)的情况，该如何处理？