django+ajax上传图片，预览并存储到数据库

最新推荐文章于 2024-07-16 11:05:46 发布

置顶 sinat_18866031

最新推荐文章于 2024-07-16 11:05:46 发布

阅读量3.1k

点赞数 2

分类专栏： Django

本文链接：https://blog.csdn.net/sinat_18866031/article/details/94717764

版权

Django 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、配置url
urls.py中配置地址
在这里插入图片描述
2、在models.py中创建类

class Pictures(models.Model):
    pic = models.ImageField(upload_to='onlineBug/media')
    def __str__(self):
        return self.pic

3、在views.py中添加如下代码

class UploadForm(forms.Form):
    file = fields.FileField()

#　发来表单　实现上传功能
@csrf_exempt
@require_POST
def upload(request):
    if request.method == 'POST':
        try:
            # f1 = UploadForm(request.POST, request.FILES)
            # f1 = request.FILES.get('formData')
            f1 = request.FILES.getlist('file')
            for img in f1:
                random_name = str(int(random.random()*10000000000000000))
                img_name = img.name.split('.')
                print(img_name)
                if len(img_name) == 2:
                    print("img_name[0]:%s"%img_name[0])
                    new_img_name = img_name[0] + random_name + '.' +img_name[1]
                else:
                    new_img_name=''
                    for i in range(len(img_name)-1):
                        new_img_name += img_name[i]
                    new_img_name = new_img_name + random_name +'.'+ img_name[len(img_name)-1]
                print("new_img_name:%s"%new_img_name)
                print("进入for循环")
                #　利用模型类将图片要存放的路径存到数据库中
                print("img:%s"%img)
                p = Pictures()
                p.pic = 'onlineBug\\static\\onlineBug\\media\\'+ new_img_name
                print("p.pic:%s"%p.pic)
                p.save()
                # 在之前配好的静态文件目录static/media/onlineBug 下 新建一个空文件
                # 然后我们循环把上传的图片写入到新建文件当中
                fname = settings.MEDIA_ROOT+ "\\" + new_img_name
                print("fname:%s"%fname)
                with open(fname,'wb') as pic:
                    for c in img.chunks():
                        pic.write(c)
            return HttpResponse('1')
        except:
            return HttpResponse('2')
    else:
        return render(request, 'onlineBug/upload.html')

4、upload.html文件

<!DOCTYPE html>
<html lang="en">
{% load staticfiles %}
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'onlineBug/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'onlineBug/css/bootstrap-theme.css' %}">
    <link rel="stylesheet" href="{% static 'onlineBug/css/dataTables.bootstrap.min.css' %}">
    <script src="{% static 'onlineBug/js/jquery.min.js' %}"></script>
    <script src="{% static 'onlineBug/js/bootstrap.js' %}"></script>
    <script src="{% static 'onlineBug/js/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'onlineBug/js/dataTables.bootstrap.min.js' %}"></script>
    <script src="{% static 'onlineBug/js/layer.js' %}"></script>
    <script src="{% static 'onlineBug/js/ajaxfileupload.js' %}"></script>
    <style type="text/css">
        .imageDiv {
            display:inline-block;
            width:160px;
            height:130px;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            border:1px dashed darkgray;
            background:#f8f8f8;
            position:relative;
            overflow:hidden;
            margin:10px
        }
        .cover {
            position:absolute;
            z-index:1;
            top:0;
            left:0;
            width:160px;
            height:130px;
            background-color:rgba(0,0,0,.3);
            display:none;
            line-height:125px;
            text-align:center;
            cursor:pointer;
        }
        .cover .delbtn {
            color:red;
            font-size:20px;
        }
        .imageDiv:hover .cover {
            display:block;
        }
        .addImages {
            display:inline-block;
            width:160px;
            height:130px;
            -webkit-box-sizing:border-box;
            -moz-box-sizing:border-box;
            box-sizing:border-box;
            border:1px dashed darkgray;
            background:#f8f8f8;
            position:relative;
            overflow:hidden;
            margin:10px;
        }
        .text-detail {
            margin-top:40px;
            text-align:center;
        }
        .text-detail span {
            font-size:40px;
        }
        .file {
            position:absolute;
            top:0;
            left:0;
            width:160px;
            height:130px;
            opacity:0;
        }
 
    </style>
 
</head>
<body>
<!--<form method="post" action="../../MultiPictareaddData" id="passForm" enctype="multipart/form-data" multipart="">-->
<form action="" method="post" enctype="multipart/form-data" class="container"  >
<div id="Pic_pass">
    <p style="font-size: 20px;font-weight: bold;">请上传多张照片 </p>
    <p><span style="color: red">注：每张照片大写不可超过4M，且最多可以传十张</span></p>
    <div class="picDiv">
        <div class="addImages">
            <input type="file" class="file" id="uploadFilexxx"  name="file" multiple="multiple" accept="image/png, image/jpeg, image/gif, image/jpg">
            <div class="text-detail">
                <span>+</span>
                <p>点击上传</p>
            </div>
        </div>
        <button type="button" id="bbt">上传</button>
    </div>
</div>
<div class="msg" style="display: none;"></div>
</form>
<!--</form>-->
 
{#<script src="js/jquery.js"></script>#}
{#<script src="js/jquery.dataTables.min.js"></script>#}
{#<script src="js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>#}
<script>
    debugger;
    //图片上传预览功能
    var userAgent = navigator.userAgent; //用于判断浏览器类型
    //使用formData完成多图片上传
    var formData = new FormData();
    $(".file").change(function() {
        //获取选择图片的对象
        var docObj = $(this)[0];
        var picDiv = $(this).parents(".picDiv");
        //得到所有的图片文件
        var fileList = docObj.files;
        //将图片数据放到formData中传递后台
        if($(this)[0].files.length==1){
            formData.append("file",docObj.files[0]);
            console.log("一次拉进来了一张图片");
        }else{
            for(var i=0; i<$(this)[0].files.length;i++){
                formData.append("file",$(this)[0].files[i]);
                console.log("你这一次拉进来好几张图片呢");
            }
        }
        //循环遍历
        for (var i = 0; i < fileList.length; i++) {
            //动态添加html元素
            var picHtml = "<div class='imageDiv' > <img id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
            console.log(picHtml);
            picDiv.prepend(picHtml);
            //获取图片imgi的对象
            var imgObjPreview = document.getElementById("img" + fileList[i].name);
            if (fileList && fileList[i]) {
                //图片属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '160px';
                imgObjPreview.style.height = '130px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要以下方式
                if (userAgent.indexOf('MSIE') == -1) {
                    //IE以外浏览器
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
                    console.log(imgObjPreview.src);
                    // var msgHtml = '<input type="file" id="fileInput" multiple/>';
                } else {
                    //IE浏览器
                    if (docObj.value.indexOf(",") != -1) {
                        var srcArr = docObj.value.split(",");
                        imgObjPreview.src = srcArr[i];
                    } else {
                        imgObjPreview.src = docObj.value;
                    }
                }
            }
        }
        /*删除功能*/
        $(".delbtn").click(function() {
            var _this = $(this);
            _this.parents(".imageDiv").remove();
        });
    });

    $("#bbt").click(function(){
        debugger;
        $.ajax({
            type:'post',
            dataType:'json',
            data:formData,
            cache: false, //上传文件不需要缓存
            url:'{% url 'onelinebug:upload' %}',
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success:function(e){
                if(e==="1"){
                    layer.msg("上传成功！",{icon:1,time:2000});
                    // 重定向页面

                }else{
                    layer.msg("上传失败！",{icon:2,time:2000});
                    }
                },
        })
    })
</script>
</body>
</html>

5、运行
在这里插入图片描述

sinat_18866031

关注

2
点赞
踩
23

收藏

觉得还不错? 一键收藏
3
评论
django+ajax上传图片，预览并存储到数据库

1、配置urlurls.py中配置地址2、在models.py中创建类class Pictures(models.Model): pic = models.ImageField(upload_to='onlineBug/media') def __str__(self): return self.pic3、在views.py中添加如下代码class U...
复制链接

扫一扫

专栏目录