Django

最新推荐文章于 2024-11-21 11:02:24 发布

原创最新推荐文章于 2024-11-21 11:02:24 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Django项目中实现文件上传功能，并详细展示了从创建HTML表单、处理上传请求到保存文件的具体步骤。此外，还介绍了如何配置和使用百度Ueditor作为富文本编辑器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件上传：

1，创建一个mtml文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<form action="/blog/upload" method="post" enctype="multipart/form-data">
    <p>请输入姓名：<input type="text" name="username"></p>
    <p>请选择文件：<input type="file" name="uploadFile"/></p>
    <p> <input type="submit" value="文件上传"/></p>
</form>
</body>
</html>

2，在app的视图里添加函数：

def upLoad(request):
    if request.method=="GET":
        return render(request,"upload.html")
    else:
        #获取文件内容进行文件上传
        username=request.POST.get("username")
        myfile=request.FILES.get("uploadFile")
        #名字和日期拼接
        fileName = "static/upload",datetime.now().strftime("%Y%m%d%H%M%S")+myfile.name
        #新建一个文件并打开
        dfile=open(fileName+'w+')
        for row in myfile.chunks():#循环chunks里的文件内容
            dfile.write(row)#读取内容
        dfile.close()#关闭
        return render(request, "uploadsuccess.html",{"username":username})

写一个提交成功后的页面

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<hr/>
{% autoescape off%}
{{username }}<br/>
<img src="{{imgSrc}}"/>
{{%endautoescape%}}
</body>
</html>

3.设置路径：

path("upload",views.upLoad),

4.打开网址 http://127.0.0.1:8000/blog/upload

配置富文本编辑器：

1 下载链接: http://ueditor.baidu.com/website/download.html#ueditor

将下载的文件,存放在我们的django项目里面:

2 打开ueditor--examples--submitformdemo.html文件

3，复制里面的需要的代码

<script type="text/javascript" charset="utf-8"
          src="/static/ueditor/ueditor.config.js"></script>#路径需要配置到文件的相对路径
<script type="text/javascript" charset="utf-8"
        src="/static/ueditor/_examples/editor_api.js"></script>
<style type="text/css">
    body{
        font-size:14px;
    }
</style>

<script type="text/plain" id="uploadFile" name="uploadFile">
    <p>欢迎使用UEditor！</p>
</script>   #id，name改成自己后台接收的名字

<script type="text/javascript">
      var editor_a = UE.getEditor('uploadFile',
          {initialFrameHeight:500, }
      );
  </script>

4，配置 editor_api.js下的路径

baseURL = '/static/ueditor/_src/';#配置文件的相对路径

5.运行项目，输入http://127.0.0.1:8000/blog/upload网页地址