layui + django 实现多图上传、预览、删除 解决csrf验证及上传端口异常

2021-06-04 01:02

阅读:832

标签:data   post方法   concat   value   idt   get   元素   返回   append   

最近碰到一个项目需要多图上传且能预览能删除

前端使用layui

引入脚本

  
 
前端代码
{% csrf_token %}
        上传图片:
     
          上传图片
      
        
        
 
    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方法需要进行验证 获取验证
                        return $(‘:input:first‘).val()
                    }
                },
              acceptMime: ‘image/*‘,
              bindAction: "#abc", //绑定上传
              url: "{% url ‘proved‘ %}", //上传接口
              choose: function (obj) { //obj参数包含的信息,跟 choose回调完全一致
                  //将每次选择的文件追加到文件队列
                  files = obj.pushFile();
                  //layer.load(); //上传loading
                  obj.preview(function (index, file, result) {
                      $(".layui-upload-list").append(‘‘)
                      $(‘#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(){setTimeout(‘window.location.reload()‘,1000);}  //上传成功后刷新页面  
           // window.location.href="http://www.soscw.com/{:url(‘test/index‘)}" //上传成功后跳转指定页面 
      );}  //上传完毕回调
              },
              error: function () {
                  //请求异常回调
              }
          });
    });
    
 
后台 views
import json
from django.http import JsonResponse
 
def proved(request):
    if request.method ==‘GET‘:
            return render(request,‘first/proved.html‘)
    if request.method ==‘POST‘:
        com_from = request.META.get("HTTP_REFERER")   //前端验证
        for f in request.FILES.getlist(‘file‘):      //循环存储图片到库
            pro = Prove()
            pro.provePeople = request.user
            pro.provePhoto = f
            pro.save()
        return JsonResponse({‘code‘: ‘0‘,‘msg‘: ‘OK‘})    //json返回 无返回前端会提示上传端口异常

layui + django 实现多图上传、预览、删除 解决csrf验证及上传端口异常

标签:data   post方法   concat   value   idt   get   元素   返回   append   

原文地址:https://www.cnblogs.com/ddb1-1/p/12345388.html


评论


亲,登录后才可以留言!