- 建路由
- 创建方法
- 渲染页面
- 下载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 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+'"> <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>