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>删除图标。为了删除图片

   引入js：ajax把图片资源提交到后台。修改元素：按钮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 = ""
    # 定义一个空列表，每次循环，将拿到的值，加入列表
    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>