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

最近在做一个项目，发现上传图片有些问题，上网查了些资料最后做到了使用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

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