上傳多組圖片且每組每個圖片都要有個標簽，標簽是動態的
思路是標簽使用逗號分隔的
先在后台將標簽存入列表
然后前端layui回調時再將下一個標簽傳入前端
存儲時使用data將標簽作為額外參數傳入后台
前端
引入依賴包
<link rel="stylesheet" href="/static/layui/css/layui.css">
<script src="/static/layui/layui.js"></script>
<script src="/static/js/jquery-1.8.2.min.js"></script>
前端代碼
{% csrf_token %}
<div id="provena">{{text}}</div>
<div>
<button type="button" class="layui-btn layui-btn-lg" id="test1">
<i class="layui-icon"></i>選擇圖片
</button>
<div class="layui-row" style="width:1500px;">
<div class="layui-upload-list"></div>
</div>
<input type="text" name="provename" id="provename" value={{text}} hidden=True readonly="readonly">
<input type="submit" id ="abc" class="layui-btn layui-btn-radius layui-btn-normal" style="font-size: 25px;" value=上傳圖片>
</div>
<script>
layui.use(['upload', 'jquery'], function(){
var upload = layui.upload;
var $ = layui.jquery;
//執行實例
var uploadInst = upload.render({
elem: '#test1', //綁定元素
multiple: true, //多圖上傳
method: 'POST',
auto: false, //關閉自動上傳
data: {
'csrfmiddlewaretoken': function () { //post傳輸需要csrf驗證
return $(':input:first').val()
},
provename: function(){
return $('#provename').val(); //傳入后台額為動態參數
}
},
acceptMime: 'image/*',
bindAction: "#abc",//綁定上傳
url: "{% url 'provee' %}", //上傳接口
choose: function (obj) { //obj參數包含的信息，跟 choose回調完全一致
//將每次選擇的文件追加到文件隊列
files = obj.pushFile();
//layer.load(); //上傳loading
obj.preview(function (index, file, result) {
$(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="雙擊刪除該圖片" style="width:315px;height:435px;">') //預覽圖片大小
$('#remove_' + index).bind('dblclick', function () {//雙擊刪除指定預上傳圖片
delete files[index];//刪除指定圖片
$(this).remove();
})
//console.log(1, index); //得到文件索引
//console.log(2, file.name); //得到文件對象
//console.log(3, result); //得到文件base64編碼，比如圖片
})
},
done: function (res) {
//imgs = imgs.concat(res.Data)
//console.log(imgs)
if (res.code==0) {
layer.msg("圖片上傳成功！", { icon: 1, time: 1000 },
//清空文件列表
function (){
for (let x in files) {
delete files[x];
}
$(".layui-upload-list").html(""); //清空div
});
if(res.msg=="null"){
window.location.href="{% url 'successful' %}" //結束跳轉指定頁面
}
if(res.msg!="null"){
$("#provename").attr("value",res.msg); //賦值input value
$("#provena").html(res.msg); //賦值div
}
}
//上傳完畢回調
},
error: function () {
//請求異常回調
}
});
});
</script>
后台
import jsoni
from django.http import JsonResponse
def provee(request):
if request.user.is_authenticated: #是否登錄
user = request.user.id
if len(peoplesProfile.objects.filter(user_id=user))>0: #上一步信息是否填寫
people = peoplesProfile.objects.get(user_id=user)
obj = information.objects.get(id=people.intention_id)
str = obj.provena #獲取標簽內容 標簽采用逗號分隔
strlist = str.split('，')
list = [] #新建列表用來存儲標簽
for value in strlist:
list.append(value) #標簽分開存入列表
if request.method =='GET':
texta = list[0]
if len(Prove.objects.filter(provePeople_id=user))>0: #判斷是否重復提交
Prove.objects.filter(provePeople_id=user).delete() #重復則刪除原有的
return render(request,'first/proved.html',{'text':texta})
if request.method =='POST':
com_from = request.META.get("HTTP_REFERER")
textb = request.POST.get('provename') #獲取額外參數
for f in request.FILES.getlist('file'): #循環圖片列表
pro = Prove()
pro.provePeople = request.user
pro.proveName = textb #打上標簽
pro.provePhoto = f #存入圖片
pro.save()
a=0 #初始一個參數a
for text in list: #循環列表
a=a+1
if text==textb: #與前端獲取標簽相同時
if textb==list[len(list)-1]: #是否為最后一個標簽
textc = "null"
break
else:
textc = list[a] #下一個標簽
break
return JsonResponse({'code': '0','msg': textc}) #json返回
else:
return redirect(reverse('home'))
else:
return redirect(reverse('loginh'))