前端form表单上传图片等信息,python后端接收。
最近总需要做关于图片上传的东西。一直百度,这次想自己记录一下。
HTML代码:
<form class="box" action="这里写后端接口地址" method="POST" enctype="multipart/form-data">
<div class="formbox">
<input type="file" name="img" id="file0" class="select2" multiple>
<p>添加标题:</p>
<textarea class="uploadtitle" name="title" id="js-file2"></textarea>
<p>添加内容:</p>
<textarea class="uploaddetail" name="content" id="js-file1"></textarea>
<button id="js-submit" style="display: none;" type="submit">提交</button>
<p id="js-button">提交</p>
</div>
</form>
上面input标签的name属性很重要,后端应该是根据这个属性来接收数据。上面隐藏掉提交按钮,用p标签代替是为了判断当用户有信息没填写的时候,不让用户提交。即下面的js代码:
$('#js-button').on('click', function() {
if($('.uploadtitle').val() == '' || $('.uploaddetail').val() == '' || $('.box2 img').attr('src') == '') {
alert('请确认所有信息已填写')
} else {
$('#js-submit').click()
}
})
前端要做的事就是这么多。下面是python后端接口代码(后端是公司另一个开发写的,代码我也不太懂):
class Upload(View):
def post(self, request):
"""
上传图片
:param request:
:return:
"""
# data = json.loads(request.body)['data']
# areas = data.get('areas')
if request.method == "POST":
img_file = request.FILES.getlist("img")
for img in img_file:
image_path = './media/slideshow/' + img.name
destination = open(image_path, 'wb')
for chunk in img.chunks():
destination.write(chunk)
destination.close()
data = {
"image": image_path,
"title": request.POST.get('title', None),
"content": request.POST.get('content', None),
"display": 1,
"add_time": time.strftime("%Y-%m-%d %H:%M:%S")
}
try:
models.SlideshowInfo.objects.create(**data)
return HttpResponse("success")
except Exception as e:
print("上次图片出错:", e)
return HttpResponse("error")
提交完成后,会默认在新页面显示接口返回值。若想在当前页面显示,并做其他逻辑判断可以引入js文件<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
然后在js里写入
$(".box").ajaxForm(function(data){
alert("上传成功" + data);
//Alert("post success.");
}); //这里.box是form表单的类名
这里就是所有代码了。感觉主要还是后端逻辑,前端就一个表单就好。