Django项目中使用plupload插件实现上传图片功能
首先下载plupload插件放在static静态文件下面,官方地址:https://www.plupload.com/
项目根目录下创建media文件夹用来存放上传的图片,配置settings文件,添加media的文件路径
如果你对python感兴趣,我这有个学习Python基地,里面有很多学习资料,感兴趣的+Q群:688244617MEDIA_ROOT = os.path.join(BASE_DIR,'media')
先写前端html页面
{# 引入插件#}<script src="/static/plupload/moxie.js"></script><script src="/static/plupload/plupload.min.js"></script>{#定义上传图片的按键和显示位置#}<div class="sbox f_l"><span>上传图片</span>{% for i in img %}<img src="{{ i.src }}" alt="">{% endfor %}<h2><a id="upload_image_name" src="javascript:;"><input type="button" value="上传图片"></a></h2><ul id="image_name_list"></ul>{# <a href="/" class="read">点击阅读</a>#}</div>
写前端js语法
{#上传图片#}
<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', //触发文件选择对话框的按钮,为那个元素idurl: '/apply/upload/', //服务器端的上传页面地址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);为可同时上传多张图片,$('#image_name_list').html(htmls);为一次智能上传一张图片#}$('#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 "apply: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>
django后台,先创建路由
from django.urls import path,include,re_path
from apply.views import applyurlpatterns = [path('index/',apply.index,name='index/'),path('about/',apply.about,name='about/'),path('info/',apply.info,name='info/'),path('list/',apply.list,name='list/'),path('time/',apply.time,name='time/'),path('fanyi/',apply.fanyi,name='fanyi/'),# 上传图片path('upload/',apply.upload,name='upload/'),# 删除准备上传的图片path('delimg/',apply.delimg,name='delimg/'),]
写方法。
from django.shortcuts import render,redirect,HttpResponse
from apply.utils import function
from blacker import settings
import os
import json
from apply.models import *# 上传图片
def upload(request):img_obj = request.FILES.get("file") # 通过前台提交过来的图片资源 img_obj.name avatar.jpgrange_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,range_num + img_type) # E:\ftp\code\www\pro\media\add_article_img\676161546271228.jpg #/media/add_article_img/123456.jpgprint(new_img_path)img_type2 = img_type.replace(".", "") # pngwith open(new_img_path, "wb") as f:for line in img_obj:f.write(line)response = {"status": 1,"message": "上传成功",'file': '/media/'+range_num + img_type+'/','file_type': img_type2}res = Media.objects.create(src='/media/'+range_num + img_type+'/')return HttpResponse(json.dumps(response))
# 删除正在上传的图片
def delimg(request):print(12)img_path = request.POST.get('path') # /media/add_article_img/722264423391172.jpg# img_name = os.path.split(img_path)[-1] # 获取图片名称 722264423391172.jpgimg_name = img_path.split('/')[-2] # 获取图片名称 722264423391172.jpgimg_new_path = os.path.join(settings.MEDIA_ROOT,img_name) # E:\ftp\code\www\pro\media\add_article_img\722264423391172.jpgif not os.remove(img_new_path):response = {"status": 1,"message": "删除成功"}return HttpResponse(json.dumps(response))
方法里面有用到function.range_num函数,这是一个封装的产生随机数函数,在应用目录下创建utils文件夹,并创建function.py文件,内容如下
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)#5454
上传发现图片上传成功,但是页面不能正常显示;
需要再配置路由,
from django.contrib import admin
from django.urls import path,include,re_path
from apply.views import apply
from django.views.static import serve
from blacker import settings
urlpatterns = [re_path(r'^media/(?P<path>.*)', serve, {"document_root":settings.MEDIA_ROOT}),path('',apply.index,name='index/'),path('admin/', admin.site.urls),path('apply/',include(('apply.urls','apply')))
]
配置后在上传图片如图所示
同时图片已写入数据库,从数据库获取数据并写在页面上;
Django项目中使用plupload插件实现上传图片功能相关推荐
- python调用qq互联_Django项目中实现使用qq第三方登录功能
使用qq登录的前提是已经在qq互联官网创建网站应用并获取到QQ互联中网站应用的APP ID和APP KEY 1,建路由 # qq登录 path('loginQq/',qq.loginQq,name=' ...
- 实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: ...
- vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
- 在项目中配置PageHelper插件时遇到类型转换异常
在项目中配置PageHelper插件时遇到类型转换异常 参考文章: (1)在项目中配置PageHelper插件时遇到类型转换异常 (2)https://www.cnblogs.com/dubhlinn ...
- Django项目中集成富文本编辑器的通用方法,适合KindEditor,xhEditor,NicEditor,wymeditor等 .
首先,请参考我以前写的一篇博客:如何把nicEditor集成到django中使用 http://blog.csdn.net/huyoo/article/details/4382317 这篇文章中的做法 ...
- django项目中使用crontab定时任务
django项目中使用crontab定时任务 django-crontab 在ubuntu-18.04.2上的使用 需求:django项目中需添加定时任务,定时执行某个函数或者自定义的命令等) 使用步 ...
- 83.Django项目中使用验证码
1. 概述 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apar ...
- 在 Vite项目中,使用插件 @rollup/plugin-inject 注入全局 jQuery
在 Vite项目中,使用插件 @rollup/plugin-inject 注入全局 jQuery 环境 写在前面 方法一.全局静态引入 方法二.使用插件 @rollup/plugin-inject 注 ...
- MVC web项目中引入jquery插件
MVC web项目中引入jquery插件 1.下载jquery [https://jquery.com/] 看到这样的文档,直接CTRL+S保存到自己的文件夹 2.将文件夹中的js文件直接拖拽导入到项 ...
最新文章
- 第17件事 成功要素分析
- dml语句包括哪些_聊聊MySQL基本操作DDL,DML,DQL,DCL
- SQL2005存储过程解密
- JAVA:获得当前执行路径的办法
- 关于xp英文版安装多国语言包的问题
- 2022-2027年中国重卡行业市场深度分析及投资战略规划报告
- C++ stringstream 从字符串中分离单词
- 台式计算机显卡最高温度多少,台式机的正常温度是多少
- C语言 线程 进程 优先级,C++线程优先级SetThreadPriority的使用实例
- 2005年国内最有份量的资源下载网站一览
- 数据结构期末考试错点汇总
- 清华计算机系出了哪些牛人,清华大学16位学霸PK 简历吓坏网友
- U-BOOT添加命令
- 正则表达式中$1,$2算是什么意思
- 为什么戏说php,戏说PHP——1.1切的开始
- 用iMovie制作app store预览视频
- 为什么python性能差
- 断电后笔记本损坏文件如何恢复
- QT + MSVC + tesseract + vcpkg 环境配置
- SpringMVC源码分析系列