- 建路由
- 创建方法
- 渲染页面
- 下载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:\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+‘"> <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>
原文地址：https://www.cnblogs.com/person1-0-1/p/11367510.html
时间： 2025-01-03 04:15:50