异步多文件上传------图片

最新推荐文章于 2023-09-21 09:40:58 发布

李--

最新推荐文章于 2023-09-21 09:40:58 发布

阅读量360

点赞数

本文链接：https://blog.csdn.net/weixin_44087528/article/details/88797331

版权

使用第三方插件完成上传图片Uploadify
Uploadify 作为基于jquery的异步上传控件，依赖于jquery

前端代码如下：

<!DOCTYPE html>
{# 加载静态文件 #}
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>异步多文件上传</title>
    {# 引入外链式css #}

    <link rel="stylesheet" href="{% static 'css/Huploadify.css' %}" type="text/css">
    {# 载入js库 #}
    <script src="{% static 'js/jquery-1.12.1.min.js' %}"></script>
    <script src="{% static 'js/axios.js' %}"></script>
    <script src="{% static 'js/jquery.Huploadify.js' %}"></script>


</head>
<body>


    {# 定义一个上传容器 #}
    <div id="upload"></div>


    <script>
        //定义异步上传对象
        let up = $("#upload").Huploadify({
            //是否自动上传
            auto:true,
            //设置文件大小限制
            fileSizeLimit:999999999,
            //设置删除延时
            removeTimeout:9999999999999,
            //文件类型
            fileTypeExts:"*.*",
            //是否多文件
            multi:true,
            //是否显示进度条(占比)
            showUploadedPercent:true,
            //是否显示文件大小
            showUploadedSize:true,
            method:'post',
            //请求的url
            uploader:'/upload',
            //回调方法
            onUploadComplete:function(file){
                console.log(file.name+'上传成功');
            },



        });

    
    
    </script>

</body>
</html>

后端：

#导包
from django.shortcuts import render,redirect
#导包
from django.http import HttpResponse,HttpResponseRedirect
#导入类视图
from django.views import View
from mymac.settings import UPLOAD_ROOT
import json
import os

#定义上传视图类
class UploadTest(View):

    #定义上传方法
    def post(self,request):
        #接收文件是以文件形式接
        img = request.FILES.get('file')
        #文件名称是name属性
        #建立文件流对象
        f = open(os.path.join(UPLOAD_ROOT,'',img.name),'wb')

        #写文件 遍历图片文件流
        for chunk in img.chunks():
            f.write(chunk)
        #关闭文件流
        f.close()

        return HttpResponse(json.dumps({'status':'ok'},ensure_ascii=False),content_type='application/json')

李--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步多文件上传------图片

使用第三方插件完成上传图片UploadifyUploadify 作为基于jquery的异步上传控件，依赖于jquery前端代码如下：<!DOCTYPE html>{# 加载静态文件 #}{% load static %}<html lang="en"><head> <meta charset="UTF-8"> <m...
复制链接

扫一扫

异步多文件上传------图片

“相关推荐”对你有帮助么？