Django 下的layui中表单元素上传和图片上传

1、HTML代码写法：

        

<form class="layui-form" method="post" action="{% url 'addBook' %}" style="margin-top:150px">
  {% csrf_token %}
  <div class="layui-form-item">
    <label class="layui-form-label">书籍名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required  lay-verify="required" placeholder="请输入书籍名称" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">作者</label>
    <div class="layui-input-block">
      <input type="text" name="author" required  lay-verify="required" placeholder="请输入作者" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">价格</label>
    <div class="layui-input-block">
      <input type="text" name="price" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">出版社</label>
    <div class="layui-input-block">
      <input type="text" name="publisher" required  lay-verify="required" placeholder="请输入出版社" autocomplete="off" class="layui-input">
    </div>
  </div>


  <div class="layui-form-item">
    <label class="layui-form-label">出版时间</label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="pub_date" id="test1" placeholder="yyyy-MM-dd">
    </div>
  </div>

  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">简介</label>
    <div class="layui-input-block">
      <textarea name="abstract" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>

  <div class="layui-form-item" hidden>
    <div class="layui-input-inline">
      <input type="text" class="layui-input" name="img_url" id="img_url">
    </div>
  </div>


  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">图书封面</label>
    <img width="150px" height="150px" id="showimg" src="" alt="">
    <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon"></i>上传图片</button>
    <div class="layui-inline layui-word-aux">
      这里以限制 60KB 为例
      <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
      </div>
    </div>
  </div>


  <div class="layui-form-item">
    <div class="layui-input-block">
      <button id="btn1" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form> 

 

 

2、js代码的编写：

 

<script>
    layui.use(['form','laydate','upload'], function(){
      var form = layui.form;
      var laydate = layui.laydate;
      var upload = layui.upload;
      var element = layui.element;
      $ = layui.$;

      //监听提交
      form.on('submit(formDemo)', function(data){

      });

      //这个是日期选择器启动js
      laydate.render({
        elem:"#test1" //指定袁术
      });


      //设定文件大小限制
      <!-- 返回的必须是json数据，否则就一直报错 -->
      upload.render({
        elem: '#test7'
        ,url: "{% url 'upload' %}" //此处配置你自己的上传接口即可
        ,size: 600000 //限制文件大小，单位 KB
        ,exts: "png|jpg|jepg"
        //上传成功后回调
        ,done: function(res){
          $("#showimg").attr("src",res.info)
          $("#img_url").val(res.info)
        }
        //上传错误回调
        ,error: function(err){
          console.log("失败" + err)
        }
        //选择文件后
        ,choose:function(n,elem,res,index){
          var pn = '0%'
          element.progress('demo',pn)
          layer.msg("上传中....",{icon:16})
        }
         //上传进度条方法
        ,progress:function(n,elem,res,index){
          layer.msg(n)
          var percent = n + '%' //获取进度百分比
          element.progress('demo',percent) //可配合layui进度条元素使用
          element.progress('demo-'+index,n+'%');//进度条
          if(n == 100){
            layer.msg('上传完毕',{icon:1});
          }
        }
      });

    });
</script>

3、后台接收代码：

 

# 书籍添加
def addBook(request):
    # 判断 当前请求方式 如果是GET
    if request.method == 'GET':
        # 显示 书籍 添加的模板
        return render(request,'Books/add.html')
    else:
        print("-------------------------------------")
        data = request.POST.dict()
        data.pop('csrfmiddlewaretoken')
        data.pop('file')
        print(data)
        obj = models.Books(**data)
        obj.save()
        return HttpResponse("接受表单提交的数据，进行数据的添加")
# 书籍删除

# 书籍修改



# 上传图片
@csrf_exempt
def upload(request):
    if request.method == "GET":
        return render(request,"upload.html")
    if request.method == "POST":
        # Todo 获取上传文件得处理对象，通过对象获取里面文件名称和内容，
        img = request.FILES.get("file",None)
        if img:
            new_date = datetime.datetime.now().strftime("%Y-%m-%d")
            new_time = time.time()

            # print(img.name) 获取文件名称
            # print(img.chunks) 获取文件内容
            # 创建文件

            save_path = '{}/{}/{}'.format("media",new_date,str(int(new_time))+img.name[img.name.rfind('.'):])
            if not os.path.exists('media/'+new_date):
                os.mkdir('media/'+new_date)
            with open(save_path,'wb') as f:
                for content in img.chunks():
                    f.write(content)
            return JsonResponse({"info":save_path})
        else:
            return JsonResponse({"info": "上传图片不正确"})