python-Web-django-图片上传

Posted person1-0-1

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了python-Web-django-图片上传相关的知识,希望对你有一定的参考价值。

  1. 建路由
  2. 创建方法
  3. 渲染页面
  4. 下载plupload插件。将插件放在项目根目录下的static
  5. 写页面,引入js,html
  6. 这个容器:放上传的图片

    当上传后,需要ul里放3要素:

    元素1:隐藏Input:值:图片路径,当点击发布文章时,将此路径提交后台,上传数据库

    元素2<img src=‘’>显示已上传的图片,给用户观看

    元素3<span><img src=’del.jpg’> </span>删除图标。为了删除图片

    引入jsajax把图片资源提交到后台。修改元素:按钮id  url:上传后台图片的路径  拼接htmls

  7. 通过这段js,将图片资源提交到后台 url: ‘/back/article/upload2/‘,

    1.  建路由:/back/article/upload2/
    2. 建方法upload2:将前台提交的资源,生成一张图

删除图片

1 页面上有这样的html class="delImg"    data-val="/media/add_article_img/267693612471283.jpg"

2 <a href="javascript:;" class="delImg" data-val="/media/add_article_img/267693612471283.jpg"> <img src="/static/images/del.png" width="15"></a>

3 写js

 点击删除按钮,获取删除按钮上的图片路径 ,通过ajax把图片路径提交后台

 

4 建删除图片路由% url "back:article/delImg/" %

5 建方法delImg

 

 获取图片路径,os.remove(img_new_path)删除图片

 

utils:

import random
def range_num(num):
    # 定义一个种子,从这里面随机拿出一个值,可以是字母
    seeds = "1234567890"
    # 定义一个空列表,每次循环,将拿到的值,加入列表
    random_num = []
    # choice函数:每次从seeds拿一个值,加入列表
    for i in range(num):
        random_num.append(random.choice(seeds))
    # 将列表里的值,变成四位字符串
    return "" . join(random_num)

 

settings:

#用户上传的文件配置
MEDIA_ROOT = os.path.join(BASE_DIR,‘media‘)
MEDIA_URL=‘/media/‘

 

views:

def gbook(request):
    ‘‘‘‘‘‘
    text = request.POST.get(text)
    img = re.findall(<img src="/media/(.*?)" alt=".*?"(.*?)/>,text)
        if img == None:
            img = /static/picture/762f99f369ae786f970477feeb3b9d77.jpg
from app01.utils import function
import os.path
#pupload上传多图片
def upload2(request):
    print(1)
    img_obj=request.FILES.get("file")#通过前台提交过来的图片资源   img_obj.name  avatar.jpg
    range_num=function.range_num(15)#生成一个15位随机数

    # print(img_obj.name)
    img_type=os.path.splitext(img_obj.name)[1]#.jpg  获取文件名后缀
    new_img_path=os.path.join(settings.MEDIA_ROOT,"add_article_img",range_num+img_type)#E:\ftp\code\www\pro\media\add_article_img\676161546271228.jpg        #/media/add_article_img/123456.jpg


    img_type2 = img_type.replace(".", "")  #png


    # print(new_img_path)
    with open(new_img_path,"wb") as f:
        for line in img_obj:
            f.write(line)

    response=
        "status":1,
        "message":"上传成功",
        file:"/media/add_article_img/"+range_num+img_type,
        file_type:img_type2
    
    print(response[file])
    return HttpResponse(json.dumps(response))

def delImg(request):
    ‘‘‘删除多图‘‘‘
    img_path=request.POST.get(path)#/media/add_article_img/722264423391172.jpg
    img_name=os.path.split(img_path)[1]#获取图片名称 722264423391172.jpg
    img_new_path=os.path.join(settings.MEDIA_ROOT,"add_article_img",img_name)#E:\ftp\code\www\pro\media\add_article_img\722264423391172.jpg
    if not os.remove(img_new_path):
        response=
            "status":1,
            "message":"删除成功"
        
        return HttpResponse(json.dumps(response))

 

html:

<li>
<a id="upload_image_name" src="javascript:;">
<input type="button" value="上传图片">
</a>
<ul id="image_name_list"></ul>
</li>

<script language="JavaScript">
        var msgLayero_upload_image_name;
        var index_upload_image_name;
        var layer_upload_image_name = 1;
        //实例化一个plupload上传对象
        var uploader_upload_image_name = new plupload.Uploader(
            browse_button: upload_image_name, //触发文件选择对话框的按钮,为那个元素id
            url: /app01/upload2/, //服务器端的上传页面地址
            flash_swf_url: /static/plupload/Moxie.swf, //swf文件,当需要使用swf方式进行上传时需要配置该参数
            silverlight_xap_url: /static/plupload/Moxie.xap, //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
            multipart_params: 
                type: image_name,
                csrfmiddlewaretoken: " csrf_token "
            ,
            resize: 
                width: 800//指定压缩后图片的宽度,如果没有设置该属性则默认为原始图片的宽度
                //height: , //指定压缩后图片的高度,如果没有设置该属性则默认为原始图片的高度
                //crop: false //是否裁剪图片
            ,
            filters: 
                max_file_size: 4mb
            ,
            init: 
                //选择文件
                FilesAdded: function (up, files) 
                    //加载层
                    index_upload_image_name = layer.msg(上传中..., 
                        icon: 16, time: 0,
                        shade: 0.01,
                        success: function (layero, index) 
                            msgLayero_upload_image_name = layero;//是加载层的div
                        
                    );
                    //layer_upload_image_name = layer.msg(‘上传中...‘, time: 0); //不自动关闭
                    uploader_upload_image_name.start();
                ,
                UploadProgress: function (up, file)  //上传中,显示进度条
                    var percent = file.percent;
                    msgLayero_upload_image_name.find(.layui-layer-content).html(<i class="layui-layer-ico layui-layer-ico1"></i>上传中... + percent + %);

                ,//单个文件上传完成
                FileUploaded: function (up, file, responseObject) 
                    console.log($.parseJSON(responseObject.response));//成功回调函数

                    $(#image_name_list).html(‘‘);
                    var result = $.parseJSON(responseObject.response);
                    if (result.status == 1) 
                        //上传成功
                        var htmls = <li class="img_upload" style="position:relative;margin:0 10px -10px 0;">;
                        htmls += <input  type="hidden" name="image_name[]" value=" + result.file + ">; //隐藏域,是为了把图片地址入库。。
                        htmls +=    <img src=" + result.file + " width="250"  />;
                        htmls += <span  style="position:absolute;top:-8px;right:-6px;background-color:#fff;border-radius:10px;"><a href=javascript:; class="delImg" data-val="+result.file+">&nbsp;<img src="/static/images/del.png" width="15" /></a></span>;
                        htmls += </li>;

                        $(#image_name_list).append(htmls);
                        //上传成功的弹出框
                        msgLayero_upload_image_name.find(.layui-layer-content).html(<i class="layui-layer-ico layui-layer-ico1"></i> + result.message);

                     else 
                        //上传失败的弹出框
                        msgLayero_upload_image_name.find(.layui-layer-content).html(<i class="layui-layer-ico layui-layer-ico2"></i> + result.message);

                    
                    setTimeout(function () 
                        layer.close(index_upload_image_name);
                    , 2000);

                ,
                //全部文件上传完成
                UploadComplete: function (up, files) 
                    setTimeout(function () 
                        layer.close(index_upload_image_name);
                    , 2000);
                ,
                //返回错误
                Error: function (up, err) 
                    msgLayero_upload_image_name.find(.layui-layer-content).html(<i class="layui-layer-ico layui-layer-ico2"></i> + result.message);
                    setTimeout(function () 
                        layer.close(index_upload_image_name);
                    , 2000);
                
            
        );

        uploader_upload_image_name.init();

    $(document).on(click, .delImg, function () 
        _this=this;
        $.post(% url "app01:delImg" %, 
            path: $(_this).data("val"),
            csrfmiddlewaretoken: " csrf_token "
        , function (json) 
            if (json.status == 1) 
                layer.msg("删除成功", 
                    time: 2000 //2s后自动关闭
                );
               $(_this).parent().parent().remove();
             else 
                layer.msg("删除失败", 
                    time: 2000 //2s后自动关闭
                );
            
        , json);
    );

</script>

 

以上是关于python-Web-django-图片上传的主要内容,如果未能解决你的问题,请参考以下文章

55bbs论坛上传图片,显示输入图片链接地址,找不到附件功能。

PHP上传图片成功后怎么打开这个地址显示在浏览器上?

使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器

在上传图片 wordpress 上更改图片名称

如何上传照片到网站?

JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片