form表单 Ajax上传文件/图片 django做逻辑处理

最新推荐文章于 2024-02-26 21:09:21 发布

原创最新推荐文章于 2024-02-26 21:09:21 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#python #django #ajax

本文介绍如何通过Ajax提交图片数据，并使用Django框架处理这些数据，包括前端页面设计、Ajax设置及后端视图处理等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个项目，发现上传图片有些问题，上网查了些资料最后做到了使用form表单提交图片，在django 里做了form验证，终于实现了网页上传图片并用django框架存储，但这并没达到我最理想的状态，我想尝试用ajax提交数据，然后再用django存储，最终发现了django的一个小模块，在此分享给大家！

首先是前端代码

<div class="form-group">
                                            <label class="col-sm-2 control-label">项目图</label>
                                            <div class="col-sm-10">
                                                <input type="file" class="btn btn-primary btn-lg active" value="上传图片"
                                                       name="image_title">
                                                <label class="control-label">图片上无文字,支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：740*457px</label>
                                            </div>
                                        </div>

<div class="panel-footer" style="text-align:center;">
                                            <input type="button" class="btn  btn-warning btn-lg"
                                                   value="提交" id="btn">
                                        </div>

1.用form表单，提交按钮的type属性必须改为button

2.Ajax必须注明post请求、data数据、API接口，以及跨域请求、接受响应

我这里使用了自带的form表单类----> FormData()

$(function () {
            $("#btn").on('click', function () {
                var fs = document.getElementById('forms');
                var fd = new FormData(fs);
                $.ajax({
                    url: "{% url 'users:ini6' %}",
                    type: "POST",
                    data: fd,
                    processData: false,  // 告诉jQuery不要去处理发送的数据
                    contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
                    beforeSend: function (xhr, setting) {
                            xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}")
                        },
                    success: function (data) {
                        if (data.res == '1') {
                            
                            window.location.href = "{% url "users:ini6" %}"
                        } else {
                            alert('提交失败')
                        }
                    }
                });
            });


        })

3.django views.py

class InitiateView(View):
	def get(self, request):
		return render(request, 'users/start-step-2.html')

	def post(self, request):
		tag = request.POST.get('tag')
		print(tag)
		label = request.POST.getlist('labelname')
		print(type(label))
		print(label)
		label_str = ','.join(label)
		p_name = request.POST.get('p_name')

		p_desc = request.POST.get('p_desc')
		p_money = request.POST.get('p_money')

		p_time = request.POST.get('p_time')
		image_title = save_image(str(int(time.time())) + request.FILES['image_title'].name, request.FILES['image_title'])
		image_detail = save_image(str(int(time.time())) + request.FILES['image_detail'].name, request.FILES['image_detail'])

		u_name = request.POST.get('u_name')
		u_phone = request.POST.get('u_phone')
		u_c_phone = request.POST.get("u_c_phone")
		u_desc = request.POST.get("u_desc")
		now = datetime.now()
		aDay = timedelta(days=30)
		now = now + aDay
		project = Project()
		project.name = p_name
		project.desc = p_desc
		print(p_money)
		project.money = int(p_money)
		project.image1 = image_title
		project.image2 = image_detail
		project.tags = label_str
		tags = Tag.objects.get(name=tag)
		project.tag = tags
		project.date = now.strftime('%Y-%m-%d')
		project.time = int(p_time)
		# project.status = '即将开始'
		project.save()
		company = Company()
		company.name = u_name
		company.desc = u_desc
		company.phone = u_c_phone
		company.c_phone = int(u_phone)
		company.aut = '未认证'

		company.save()
		projects = Project.objects.get(name=p_name)
		usercreate = UserCreate()
		usercreate.user = request.user
		usercreate.project = projects
		usercreate.save()
		return JsonResponse({"res": '1'})

def save_image(image_detail_filename, file_obj):
	# 一定要有uploadimage文件夹
	with default_storage.open(MEDIA_ROOT + '/' + 'uploadimage' + '/' + image_detail_filename,'wb+') as file:
		for chunk in file_obj.chunks():
			file.write(chunk)
	image_detail_upload = 'uploadimage/' + image_detail_filename
	return image_detail_upload

save_image函数利用了django的default_storage进行存储，在获取前端数据时使用request.FILES['image_title']就能获取到前端上传的内容，但存储到数据库时要存储为其路径,而根据save_image函数可以得到其存储的位置 image_detail_upload

到这儿，前端到后端的代码就都完成啦！