models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#}
{# {% for u in teacher_d.values %}#}
{% for k,u in teacher_d.items %}
<input type="text" value="{{ k }}">
<input type="text" value="{{ u }}">
{% endfor %}
user_dict = {
"1":"sb1",
"2":"sb2"
}
return render(request,"teacher.html",{"teacher_list":new_teacher_list,"teacher_d":user_dict})
基于form上传文件，我们一般会把文件上传到指定的路径，然后在数据库中存储文件和对应的路径的地址
前端上传文件的代码
<body>
<form method="post" action="/user_manager_app1/upload/" enctype="multipart/form-data">
{# enctype="multipart/form-data"如果在form标签中加上这一个属性，则上传的问题就不在request.POST中了，而在request.FILES中#}
<input type="text" name="name">
<input type="file" name="file">
<input type="submit" value="sum提交">
</form>
<h1>文件展示</h1>
<table border="1">
<caption>数据库中的文件</caption>
<thead>
<tr>
<th>文件名称</th>
<th>文件路径</th>
<th>上传时间</th>
<th>文件大小</th>
<th>文件操作</th>
</tr>
</thead>
<tbody>
{% for file in file_data %}
<tr>
<td>{{ file.file_name }}</td>
<td>{{ file.file_path }}</td>
<td>{{ file.file_time }}</td>
<td>{{ file.file_size }}</td>
<td>查看|删除</td>
</tr>
{% endfor %}
</tbody>
</table> </body>
后端处理的代码
def upload(reqeust):
if reqeust.method.lower() == "get":
file_all = models.file.objects.all()
return render(reqeust,"upload.html",{"file_data":file_all}) else:
name = reqeust.POST.get("name")
file = reqeust.POST.get("file")
file_new = reqeust.FILES.get("file") print("上传的文件的名称",file_new.name,"文件的大小",file_new.size)
file_path = os.path.join("static","upload",file_new.name)
with open(file_path,"wb") as f:
for chunk in file_new.chunks():
f.write(chunk)
models.file.objects.create(
file_path = file_path,
file_name = file_new.name,
file_time = time.ctime(),
file_size = file_new.size
)
return redirect("/user_manager_app1/upload/")
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
通过ajax上传文件
前端代码--html
<h1>formData方式上传</h1>
<div id="imgs">
</div>
<input type="file" id="upload_file">
<input type="button" value="点击上传" id="upload_button">
<span id="errors"></span>
前端代码--jquery
<script src="/static/jq/jquery-3.3.1.js"></script>
<script>
$(function () {
upload_file()
})
function upload_file() {
$("#upload_button").bind("click",function () {
{# $("#errors").html()#}
var dict = new FormData()
dict.append("file",document.getElementById("upload_file").files[0])
$.ajax(
{
url:"/app1/upload_ajax/",
type:"POST",
data:dict,
success:function (data) {
data = JSON.parse(data)
if(data["state"] == "true"){
var img = document.createElement("img");
img.src = "/" + data["file_path"];
var father_ele = document.getElementById("imgs");
father_ele.appendChild(img);
{# window.location.reload()#}
}else {
$("#errors").html(data["error"])
}
},
processData:false,
contentType:false
}
)
})
}
</script>
这里有三个点需要注意
a、这里需要个formdata的对象，把我们上传的文件通过append的方法添加到这个formdata对象中，然后通过ajax把这个formdata对象发送给后端就可以了
先找到上传文件的input的标签，这里我们通过id去定位到input的标签
b、通过ajax直接把这个数据发送给后端，这里要注意，我们的data就是上面我们创建的formdata对象中
c、如果ajax要向后端发送数据，则必须要还有设置两个类型
最后我们看下后端的代码，后端也是要在request.Files中获取文件对象，然后写到本地就可以了
def upload_ajax(request):
import os
import json
method = request.method.lower()
if method == "get":
return render(request,"upload.html")
else:
res = {"state":"true","file_path":None,"error":""}
file = request.FILES.get("file")
print(file)
file_path = os.path.join("static","file",file.name) try:
with open(file_path,"wb") as f:
for chunk in file.chunks():
f.write(chunk) except Exception as e:
print(e)
res["state"] = "false"
res["error"] = "上传失败"
return HttpResponse(json.dumps(res))
else:
res["file_path"] = file_path return HttpResponse(json.dumps(res))
models渲染字典&form表单上传文件&ajax上传文件的更多相关文章
- 摒弃FORM表单上传图片，异步批量上传照片
之前作图像处理一直在用form表单做图片数据传输, 个人感觉low到爆炸而且用户体验极差,现在介绍一个一部批量上传图片的小技巧,忘帮助他人的同时也警醒自己在代码的编写时不要只顾着方便,也要考虑代码的健 ...
- java如何区分是form表单请求，还是ajax请求
requestType = request.getHeader("X-Requested-With"); if(requestType==null) ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- 前后端交互技术之servlet与form表单提交请求及ajax提交请求
1.先来个简单的form表单 login.jsp,建在webcontent目录下(url写相对路径就可以了) <!DOCTYPE html><html><head> ...
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- form表单，submit，ajax提交
尼玛... 一个简单的表单提交,竟然给我整的直郁闷. 本来就是个保存功能,几个前人都用的ajax提交,我也就没改成submit.然后坑爹的就来了. 我在表单里写了个<form></f ...
- Django的form表单之文件上传
在生成input标签的时候可以指定input标签的类型为file类型 <!DOCTYPE html> <html lang="en"> <head&g ...
- form表单上传文件
一.formData()直接获取form表单数据 例子:获取form表单的id给formData(),然后传给后台. 要求: 传入值的name值必须与后台接受的name相对应. form表单不能嵌套, ...
- Django之form表单组件
Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
随机推荐
- 理解Storm Metrics
在hadoop中,存在对应的counter计数器用于记录hadoop map/reduce job任务执行过程中自定义的一些计数器,其中hadoop任务中已经内置了一些计数器,例如CPU时间,GC时间 ...
- 6.28笔记-servlet3.0注解配置、文件上传、过滤器、监听器
一.servlet3.0注解配置 使用javaEE6.0 支持servlet3.0 value的值就是访问路径 urlPatterns的值也是访问路径 @WebServlet(name="D ...
- 朴素贝叶斯-对数似然Python实现-Numpy
<Machine Learning in Action> 为防止连续乘法时每个乘数过小,而导致的下溢出(太多很小的数相乘结果为0,或者不能正确分类) 训练: def trainNB0(tr ...
- Python预编译语句防止SQL注入
这个月太忙,最近不太太平,我的愿望是世界和平! ================================== 今天也在找python的预编译,早上写的sql是拼接来构成的.于是找了2篇文章,还 ...
- BFC概念及应用
定义 块级格式化上下文 特性 1.内部box在垂直方向,一个接一个放置 2.box垂直方向的间距由margin决定 属于同一个BFC的相邻box的margin会发生重叠(外边距重叠) ...
- Django Middleware 之 SessionMiddleware
Django版本:1.7.11 先放源码: class SessionMiddleware(object): def __init__(self): engine = import_module(se ...
- 转载 深入理解java类加载器
1 基本信息 每个开发人员对java.lang.ClassNotFoundExcetpion这个异常肯定都不陌生,这背后就涉及到了java技术体系中的类加载.Java的类加载机制是技术体系中比较核心的 ...
- CPU，寄存器，一缓二缓.... RAM ROM 外部存储器等简介
自我学习:一.线程安全日期格式化操作的几种方式:1.每次new一个新对象:public static Date parse(String date) throws ParseException { r ...
- mock单测
mockMvc执行流程总结: 整个过程:1.mockMvc.perform执行一个请求:2.MockMvcRequestBuilders.get("/user/1")构造一个请求3 ...
- VB6 MsgBox 函数
在对话框中显示消息,等待用户单击按钮,并返回一个值指示用户单击的按钮. MsgBox(prompt[, buttons][, title][, helpfile, context]) 参数 promp ...