python-Web-django-图片上传，,建路由创建方法渲染页

python-Web-django-图片上传，,建路由创建方法渲染页

建路由创建方法渲染页面下载plupload插件。将插件放在项目根目录下的static下写页面,引入js,写html

这个容器：放上传的图片

当上传后，需要ul里放3要素：

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

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

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

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

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

建路由：/back/article/upload2/建方法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 randomdef 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 functionimport 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-图片上传