查看“Python Web: Django REST项目实战前端开发”的源代码

==背景==
开发一个在线中文字符识别系统，

用户在网页上上传图片，然后通过Ajax技术将图片上传至后台服务器，

后台调用中文字符识别算法将图片中的文字识别出来，并以JSON字符串的形式返回结果给前端页面进行显示。

开发分为前端和后台，前后端之间所有的交互通过API进行。

==实训步骤==
===准备静态资源===
采用Bootstrap框架设计页面，

将Bootstrap有关文件安文件类型放置在frontend/css 和frontend/js中，然后在img文件夹下放一张sample.img图片用于展示图像显示区域

在css文件夹下新建一个空的style.css，作为个性化定制使用。

===编写页面头部===
 <nowiki>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>在线中文字符识别</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
</body>
</html></nowiki>

===编写网页主干===
 <nowiki>
<div class="container">
        <!-- 标题 -->
        <div class="row">
            <div class="col-lg-12">
                <p class="text-center h1">
                    在线中文字符识别
                </p>
            </div>
        </div>
        <!-- 分隔符 -->
        <div class="hr">
            <hr />
        </div>
        <!-- 主体内容 -->
        <div class="row">
            <br>
            <!-- 图片上传 -->
            <div class="col-md-6">
                <img id="photoIn" src="img/sample.jpg" class="img-responsive">
                <input type="file" id="photo" name="photo" />
            </div>
            <!-- 运行结果 -->
            <div class="col-md-6">
                <div class="col-md-12">
                    <textarea id="output" disabled class="form-control" rows="5">
                    </textarea>
                </div>
                <br>
                <div class="col-md-12">
                    <p class="text-center h4">识别结果</p>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="text-center">
                <button type="button" id="recognition" class="btn btn-primary">识别</button>
            </div>
        </div>
</div>
</nowiki>

在style.css中添加分割线对应的样式设计：

 <nowiki>
div.hr {
    height: 3px;
    background: #818080;
}
div.hr hr {
    display: none;
}</nowiki>
===添加JS代码，实现图片浏览和上传===
显示上传的图片：

 <nowiki>
<script>
        $(function () {
            $('#photo').on('change', function () {
                var r = new FileReader();
                f = document.getElementById('photo').files[0];
                r.readAsDataURL(f);
                r.onload = function (e) {
                    document.getElementById('photoIn').src = this.result;
                };
            });
        });
    </script></nowiki>

将上传的图片向后端传输：

 <nowiki>
<!-- 图像发送至后台服务器进行识别 -->
    <script>
        $('#recognition').click(function () {
            formdata = new FormData();
            var file = $("#photo")[0].files[0];
            formdata.append("image", file);
            $.ajax({
                url: '/ocr/', // 调用Django服务器计算函数
                type: 'POST', // 请求类型
                data: formdata,
                dataType: 'json', // 期望获得的响应类型为json
                processData: false,
                contentType: false,
                success: ShowResult // 在请求成功之后调用该回调函数输出结果
            })
        })
    </script>

    <!-- 返回结果显示 -->
    <script>
        function ShowResult(data) {
            output.value = data['output'];
        }
    </script></nowiki>

*图像传输采用了Ajax技术，当用户点击“识别”按钮时将图像数据封装到formdata变量并发送至后端，
*发送地址为/ocr ,发送方式为POST
*收到结果后执行ShowResult()函数，输出识别信息。


==验证==
用浏览器打开，并上传图片.

[[文件:python21061302.png|600px]]