Django 图片管理栏目添加图片功能

最新推荐文章于 2025-06-15 06:36:44 发布

maizhaoxi

最新推荐文章于 2025-06-15 06:36:44 发布

阅读量641

点赞数

CC 4.0 BY-SA版权

文章标签： Django

本文链接：https://blog.youkuaiyun.com/maizhaoxi/article/details/82850136

这篇博客记录了使用Django框架成功实现图片管理栏目添加图片功能的过程，经过大半年的实践，最终代码无误，是一次成功的实战经验。

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

敲了大半年的代码，总算一次完成，没有报错，值得记录记录一下。

<script type="text/javascript">
    function addImage(){
        var index = layer.open({
            type: 1,
            skin: 'layui-layer-demo',
            closeBtn: 0,
            shift: 2,
            shadeClose: true,
            title: "添加图片",
            area: ['600px','440px'],
            content: "<div style='padding:20px'><p>请增加扩展名是.jpg 或.png 的网上照片地址</p><form><div class='from-group'><label for='phototitle' class='col-sm-2 control-label'>标题</label><div class='col-sm-10'><input id='phototitle' type='text' class='form-control' style='margin-bottom:5px'></div></div><div class='form-group'><label for='photourl' class='col-sm-2 control-label'> 地 址 </label><div class='col-sm-10'><input id='photourl' style='margin-bottom:5px' type='text' class='form-control'></div></div><div class='form-group'><label for='description' class='col-sm-2 control-label'> 描 述 </label><div class='col-sm-10'><textarea class='form-control' style='margin-bottom:5px' row='2' id='photodescription'></textarea></div></div><div class='form-group'><div class='col-sm-offset-2 col-sm-10'><input id='newphoto' type='button' class='btn btn-default' value='添 加'></div></div></form></div>",
            success: function(){
                $("#newphoto").on('click',function(){
                    var title = $("#phototitle").val();
                    var url = $("#photourl").val();
                    var description = $("#photodescription").val();
                    var photo = {"title":title, "url":url, "description":description};
                    $.ajax({
                        url: '{% url "image:upload_image" %}',
                        type: "POST",
                        data: photo,
                        success: function(e){
                            var status = e['status']
                            if(status =="1"){
                                layer.close(index);
                                window.location.reload();
                            } else {
                                layer.msg("图片无法获取，请更换图片");
                            }
                        },
                    });
                });
            },
        });
    }
</script>