根据预定模板,将内容填写到Excel后上传,绝对比手动操作系统效率高很多。这里记录一下编写上传功能的步骤。
本文采用的例子是:上传一份试卷。
代码涉及到知识点:Bootstrap前端界面、Ajax与Django通信、xlrd读取Excel、Font Awesome图标。
1. 需求描述
系统添加试卷上传导入功能,上传保存着整张试卷结构Excel后,可以读取并保存。
试卷大概是这个三级存储结构,章节存着试卷的id,试题存着章节的id。
试卷名称
一、 章节1
1. 试题1
2. 试题2
3. 试题3
二、 章节2
4. 试题4
5. 试题5
6. 试题6
2. 设计的Excel格式如下:
说明:章节需要要等于最终的序号,通过章节数量计算出章节的结束行,进而计算出试题的起始行。
3. 上传html模板设计
讲解
- 这里请注意,Form必须有multipart/form-data;
- 不用试图去显示上传路径,出去安全原因会变成fakepath,然后会费劲的寻找fakepath的解决办法,fakepath变实际路径,其实不显示路径,也没啥损失;
- 不要问我csrf_token 是什么鬼,重点看Bootstrap布局。
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<button type="submit" name="Create" id="btn_import_paper" class="btn btn-primary btn-sm" style="margin-bottom:5px;margin-right:8px;"><i class="icon-upload-alt"></i> 导入</button>
<div class="row" style="margin-top:20px;">
<input id="paper_file" name="paper_file" type="file" style="display:none">
<div class="col-md-2" style="padding-top:7px;text-align:right;"><label>选择导入的Excel试卷模板</label></div>
<div class="col-md-4">
<input id="photoCover" class="form-control" type="text" style="height:30px;"></div>
<a class="btn btn-primary btn-sm" onclick="$('input[id=paper_file]').click();"><i class="icon-folder-open"></i> 浏览文件</a>
</div>
</form>
4. 浏览按钮js
$('input[id=paper_file]').change(function() {
$("#rst_message").remove();
$('#photoCover').val($(this).val().replace("C:\\fakepath\\", ""));
});
5. 定义url映射
url(r'^import_paper/$', views.import_paper, name='ImportPaper'),
6. Ajax调用方法
上传有好多方法,用自己最熟悉的Ajax方法,挂接btn_import_paper的click函数,通过Ajax调用 ImportPaper函数。关键语句已标红。
$("#btn_import_paper").click(function () {
var fileobj = $('#paper_file')[0].files[0]; //先将jquery对象转换为dom对象
var form = new FormData();
form.append('paper_file',fileobj);
$.ajax({
url: '{% url "ImportPaper" %}',
data: form,
processData:false,
contentType:false,
type: 'GET',
}).done(function(response, textStatus, jqXHR){ //same as .success (depricated as of 1.8)
console.log("done");
console.dir(arguments);
//alert("cool");
})
.fail(function(jqXHR, textStatus, errorThrown){ //replaces .error
console.log("error");
console.dir(arguments);
})
.always(function(/*data|jqXHR, textStatus, jqXHR|errorThrown*/){ //replaces .complete
console.log("always");
console.dir(arguments);
});
});
7. View中读取Excel
讲解:
- JS中的append到Form的paper_file,通过request.FILES.get('paper_file')读取出来;
- 使用xlrd读取Excel,取得所有行列,根据行列取得值用cell_value,wb实例用完记得释放一下内存。
- 循环用for x in range(sec_start_line,sec_end_line): 循环包括sec_start_line, 不包括sec_end_line
- 读取后内容存储到数据库代码与本文无关所以去掉了,根据每人根据自己情况存储即可。
def import_paper(request):
template = loader.get_template('import_paper.html')
context = {}
stat = {'status':False,'data':None,'msg':""}
if request.method == 'POST':
try:
paper_file = request.FILES.get('paper_file')
wb = xlrd.open_workbook(filename=None, file_contents=paper_file.read())
table = wb.sheets()[0]
paper_name=table.cell_value(0,1)
section_count=table.cell_value(1,1)
nrows = table.nrows #行数
ncole = table.ncols #列数
sec_start_line = 3
sec_end_line=sec_start_line+int(section_count)
for x in range(sec_start_line,sec_end_line):
print(table.cell_value(x,1))
# 用完记得删除
wb.release_resources()
del wb