前端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.namedestination = 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表單的類名

這里就是所有代碼了。感覺主要還是后端邏輯，前端就一個表單就好。

總結

以上是生活随笔為你收集整理的前端form表单上传图片等信息，python后端接收的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。