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标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否 ...
随机推荐
- 快速开发jQuery插件的10大技巧
原文链接:http://wiki.itivy.com/?p=36 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & ...
- Linux版本使用的文件系统类型
1. cat /etc/fstab 2. df -T -h
- vcenter修改用户密码的方法
https://192.168.x.x:9443登录,必须用administrator@vsphere.local登录,不能用root用户登录. 主页-系统设置- Single Sing-On-用户和 ...
- mysql导入导出数据中文乱码解决方法小结(1、navicat导入问题已解决，创建连接后修改连接属性，选择高级->将使用Mysql字符集复选框去掉，下拉框选择GBK->导入sql文件OK;2、phpmyadmin显示乱码的问题也解决，两步：1.将sql文件以utf8的字符集编码另存，2.将文件中sql语句中的字段字符集编码改成utf8,导入OK)
当向 MySQL 数据库插入一条带有中文的数据形如 insert into employee values(null,'张三','female','1995-10-08','2015-11-12',' ...
- mysql 笔记分享
mysql LPAD 和RPAD不足位数补齐填充函数总结一下mysql数据库的一些特征MySQL WHERE 语句优化之我见mysql limit 实例详解mysql 如何实现多表联合更新MySQL ...
- Python 之 cas-clinet
因为要搞一个用户登录安全的验证,要用到cas服务,所以在网上搜了很多关于cas信息才搞成功. 我写的属于客户端的cas就是从CAS服务,获取返回的ticket验证通过,用户登录成功. 使用的是web. ...
- java开发-问题清单
本人是做Java开发的,这是我参加58,搜狐,搜狗,新浪微博,百度,腾讯文学,网易以及其他一些小的创业型公司的面试常被问的问题,当然有重复,弄清楚这些 1. junit用法,before,before ...
- ASCII和万国码
ASCII和万国码 什么是ASCII 计算机的起初是使用内存中的0101来表示数和机器码.如何用内存中的bit来表示文本一直困扰着人们,毕竟人类主要的信息展示是文字,而不是苦涩的0101.后来ASCI ...
- 数据库中的html在页面上显示
在ASP页面中,动态显示html格式的数据的方法如下: .aspx文件: <div id="divBox" runat="server"></ ...
- TTreeView.OnCustomDrawItem
TTreeNode *node; node = , "AAAA"); TreeView1->Items->AddChild(node, "aaa1" ...