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

最新推荐文章于 2024-06-29 08:31:59 发布

原创最新推荐文章于 2024-06-29 08:31:59 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#python #django #layui #form

Python 同时被 2 个专栏收录

32 篇文章

订阅专栏

Django

8 篇文章

订阅专栏

本文介绍了如何使用HTML、JavaScript和后端技术实现一个图书添加表单，包括字段验证、日期选择、文件上传功能，并展示了后台接收和处理数据的代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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": "上传图片不正确"})