本章知识点
1、图片上传
2、Ajax post请求
知识点讲解
1、图片上传
1、在form表单的标签当中添加属性
enctype=“multipart/form-data”
2、input的name一定要看好
在视图当中
1、接收图片不是request.POST或者request.GET 是request.FILES
2、校验的时候，我们可以把request.post 和request.FILES一起传入校验
3、post数据正常保存
但是文件对象，在数据库保存是地址（img的name）
4、保存图片
settings
views
文件可以保存
2、Ajax post请求
Ajax的get请求，然后，我们学校ajax的post
Ajax的post
构建formdata对象
formdata等于一个表单数据容器。可以把所有表单元素的name与value组成一个queryString,提交到后台。 在使用ajax提交时，使用FormData对象可以减少拼接queryString的工作量
1、开始往formdata当中添加数据 键值对
1、文件对象的处理
2、csrf_token
键：csrfmiddlewaretoken
值：{{ csrf_token }}
画红线的地方
然后发起ajax请求
URL：“”暂时为空
定义后端请求处理的函数
def ajaxPostData(request):
“”"
处理数据页面
“”"
result = {“statue”:“error”,“data”:""}
if request.method == “POST” and request.POST:
postData = request.POST #post的数据
postFile = request.FILES #提交的文件
img_file = postFile.get(“photo”)
student_valid = StudentForm(data = postData,files = postFile)
if student_valid:
nickname = postData.get(“nickname”)
age = postData.get(“age”)
gender = postData.get(“gender”)
phone = postData.get(“phone”)
email = postData.get(“email”)
address = postData.get(“address”)
classes = postData.get(“classes”)
project = Project.objects.get(id=int(postData.get(“project”)))
score = postData.get(“score”)
photo = img_file.name
s = Student()
s.nickname = nickname
s.age = age
s.gender = gender
s.phone = phone
s.email = email
s.address = address
s.classes = classes
s.project = project
s.score = score
s.photo = “img/”+photo
path = os.path.join(MEDIA_ROOT,“img\%s”%photo)
with open(path,“wb”) as f:
for i in img_file.chunks():
f.write(i)
s.save()
result[“statue”] = “success”
result[“data”] = “%s is saved”%nickname
else:
result[“data”] = student_valid.errors #表单校验的错误信息
else:
result[“data”] = “your request method must be post”
return JsonResponse(result)
指定路由，ajax发起请求
代码测试
ajax发起请求。添加了URLS。
$.ajax(
{
url: “/student/ajaxPostData/”,
type: “POST”,
data: formData,
processData: false, //是否严格检查数据格式
contentType: false, //是否严格检查内容类型
success: function (data) {
console.log(data) //接收返回数据
},
error: function (error) {
console.log(error) //接收返回错误
}
}
)
本章总结
图片上传
Ajax post请求