本章知识点
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请求