zoukankan      html  css  js  c++  java
  • 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:ftpcodewwwpromediaadd_article_img676161546271228.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:ftpcodewwwpromediaadd_article_img722264423391172.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: {
                     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>
  • 相关阅读:
    小任务之使用SVG画柱状图~
    webpack.config.js配置遇到Error: Cannot find module '@babel/core'问题
    今日笔记
    querySelector与getElementBy等的区别
    JavaScript实现邮箱后缀提示功能
    JavaScript中按键事件的e.keyCode || e.which || e.charCode
    跳转页面&回到上一页
    echarts.js 做图表的插件
    局域网内电脑远程访问共享
    同引擎mysql数据库转导快
  • 原文地址:https://www.cnblogs.com/person1-0-1/p/11367510.html
Copyright © 2011-2022 走看看