Laravel 在线考试系统——试题导入功能（1）

前言

功能实现流程分析：上传Excel文件，识别文件内容插入数据库
需要：Web Uploader上传组件，下载地址：Web Uploader

数据库设计

表名	question
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	question	varchar(255)	试题具体内容	N
3	option_a	varchar(255)	选项A	N
4	option_b	varchar(255)	选项B	N
5	option_c	varchar(255)	选项C	N
6	option_d	varchar(255)	选项D	N
7	answer	varchar(5)	试题答案	N
8	updated_at	datetime	记录更新时间	Y
9	created_at	datetime	记录创建时间	Y

路由设置

异步上传路由

Route::post('uploader/webuploader','UploaderController@webuploader');//异步上传

php模板页面路由 import.blade.php

Route::any('question/import','QuestionController@import');//导入

上传功能

import 模板页面

引入webuploader的需要css文件 （href路径改成自己的）

<!-- 引入webuploader的需要css文件 -->
    <link rel="stylesheet" type="text/css" href="../webuploader.css">

上传部分html

  <form  method="post" >
		<div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">选择文件：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!-- 给webuploader使用的div -->
                <div id="uploader-demo">
                    <!--用来存放item-->
                    <div id="fileList" class="uploader-list">
                        <!-- 导入隐藏域 -->
                        <input type="hidden" name="excelpath" value=""/>
                    </div>
                    <div id="filePicker">选择文件</div>
                </div>
            </div>
        </div>
        {{csrf_field()}}
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="  提交  ">
            </div>
        </div>
    </form>

效果

引入webuploader的JavaScript文件

<!-- 引入webuploader的JavaScript文件 -->
    <script type="text/javascript" src="../webuploader.js"></script>
    <script type="text/javascript" src="../excel.js"></script>

excel.js

jQuery(function() {
    var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
        // Web Uploader实例
        uploader;

    // 初始化Web Uploader
    uploader = WebUploader.create({
    	//添加一些自己需要的参数
    	formData: {
    		//在外部为任何文件中都不能使用模版引擎的语法
    		_token: $('input[name=_token]').val(),
    	},
        // 自动上传。
        auto: true,
        // swf文件路径（修改为swf文件的真实路径）
        swf: '../Uploader.swf',
        // 文件接收服务端（修改为后端处理文件上传的路由）
        server: '/uploader/webuploader',//本地存储
        // 选择文件的按钮。可选。
        pick: '#filePicker',
    });

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function(file, percentage) {
        var $li = $('#' + file.id),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if (!$percent.length) {
            $percent = $('
')
                .appendTo($li)
                .find('span');
        }

        $percent.css('width', percentage * 100 + '%');
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function(file,response) {
        $('#' + file.id).addClass('upload-state-done');
        //需要将返回值中path写到隐藏域中
        $('input[name=excelpath]').val(response.path);
    });

    // 文件上传失败，现实上传出错。
    uploader.on('uploadError', function(file) {
        var $li = $('#' + file.id),
            $error = $li.find('div.error');

        // 避免重复创建
        if (!$error.length) {
            $error = $('
').appendTo($li);
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on('uploadComplete', function(file) {
        $('#' + file.id).find('.progress').remove();
    });
});

excel文件内容

第一行内容是后续识别文件的关键。

传送门：试题导入功能（2）