Django文件上传***

分别用三种Django文件上传方式(form方式、jQuery+jQuery.ajax方式、原生JS+原生ajax方式)做上传功能示例

文件	文件释义
form_upload.html	form上传文件静态页面
jquery_ajax_upload.html	jQuery+jQuery.ajax上传文件静态页面
js_ajax_upload.html	原生JS+原生ajax上传文件静态页面
Fupload.py	form上传文件方法
JAupload.py	原生JS+原生ajax上传文件方法
JQupload.py	jQuery+jQuery.ajax上传文件方法

项目架构

MydjangoAPPfilemigrations__init__.pystaticjquery-3.3.1.min.jstemplatesform_upload.htmljquery_ajax_upload.htmljs_ajax_upload.htmlviewsFupload.pyJAupload.pyJQupload.py__init__.pyadmin.pyapps.pymodels.pytests.pyMydjangosetting.pyurls.pywsgi.py

创建项目

django-admin startproject Mydjango
cd Mydjango
python manage.py startapp APP

form_upload.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>form upload</title>
</head>
<body>
<h1>form方式上传提交</h1>
<!--   包含上传文件的必要参数 enctyoe --><form action="f_upload.html" method="POST" enctype="multipart/form-data">{% csrf_token %}<!-- 上传文件一定要给name参数 --><input type="file" name="uploadfile"><input type="submit"></form>
</body>
</html>

jquery_ajax_upload.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax upload</title><script src="../static/jquery-3.3.1.min.js"></script>
</head>
<body><h1>jQuery+jQuery方式的ajax上传提交</h1>
<!--   包含上传文件的必要参数 enctyoe -->
{% csrf_token %}<input id="Upfile" type="file"  multiple="multiple" ><a id="FileSub">提交</a><script>$("#FileSub").click(function() {var f_obj = $("#Upfile").get(0).files[0];                       //获取上传文件信息console.log("文件对象：",f_obj);console.log("文件名称是：",f_obj.name);console.log("文件大小是：",f_obj.size);var data = new FormData();                                      //创建formdata对象，便于将文件传输到后端data.append("file",f_obj)                                        //在formdata对象中添加(封装)文件对象$.ajax({url:'jq_upload.html',type:'POST',data:data,cache: false,                                               //上传文件无需缓存processData:false,                                          //不对数据做序列化操作contentType:false,                                          //不定义特殊连接类型success:function (arg) {alert("文件已经上传成功，点击确定刷新页面");location.reload();}})});
</script>
</body>
</html>

js_ajax_upload.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax upload</title>
</head>
<body><h1>原生js+原生ajax方式上传提交</h1>
<!--   包含上传文件的必要参数 enctyoe -->
{% csrf_token %}<input id="Upfile" type="file"  multiple="multiple" ><a onclick="Js_Ajax();">提交</a><script>function Js_Ajax() {var xhr = new XMLHttpRequest();                                                         //创建一个空对象，用于传输后端xhr.onreadystatechange = function () {                                                  //指定回调函数if (xhr.readyState == 4) {                                                           //回调函数状态判断console.log("返回信息：", xhr.responseText);alert("文件已经上传成功，点击确定刷新页面");location.reload();}};xhr.open('POST', 'ja_upload.html');                                                       //建立POST方式请求xhr.setRequestHeader('Conten-Type', 'application/x-www-foorm-urlencoded;charset-UTF-8');  //POST数据请求头var f_obj = document.getElementById("Upfile").files[0];                                   //获取上传文件对象console.log("文件对象：", f_obj);console.log("文件名称是：", f_obj.name);console.log("文件大小是：", f_obj.size);var data = new FormData();                                                                //创建formdata对象，便于将文件传输到后端data.append("file", f_obj);                                                                //在formdata对象中添加(封装)文件对象xhr.send(data);                                                                            //建立的POST请求发送的数据};
</script>
</body>
</html>

Fupload.py

# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponsedef F_Upload(request):                 # form 方式提交上传文件if request.method == "GET":return render(request, 'form_upload.html', )else:F = request.FILESprint("form上传的文件是：",F)                   #可以看到保护文件名和文件对象的字典f_obj = F.get('uploadfile')                     #上传的文件对象N = f_obj.name                                  #上传的文件名称S = f_obj.size                                  #上传的文件大小print("文件名称是：",N)print("文件大小是：",S)W_File(f_obj)                                   #执行上传文件的方法return HttpResponse('文件上传成功！')
def W_File(file_obj):                                   #上传文件写入服务器,参数为上传的文件对象f = open('APP/file/' + file_obj.name + "", 'wb')    # 服务器创建上传同名的文件for line in file_obj.chunks():                      # 分块拿上传数据f.write(line)                                   # 循环写入拿到的数据块到服务器f.close()

JAupload.py

# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponsedef JA_Upload(request):if request.method == "GET":return render(request,'js_ajax_upload.html',)else:file_obj = request.FILES.get('file')                # 拿到from获取到的file数据print("上传文件名称是：", file_obj.name)print("上传文件大小是：", file_obj.size)f = open('APP/file/' + file_obj.name + "", 'wb')    # 服务器创建上传同名的文件for line in file_obj.chunks():                      # 分块拿上传数据f.write(line)                                   # 循环写入拿到的数据块到服务器f.close()return HttpResponse('文件上传成功！')

JQupload.py

# -*- coding:utf8 -*-
from django.shortcuts import render,HttpResponsedef JQ_Upload(request):if request.method == "GET":return render(request,'jquery_ajax_upload.html',)else:file_obj = request.FILES.get('file')                # 拿到from获取到的file数据print("上传文件名称是：", file_obj.name)print("上传文件大小是：", file_obj.size)f = open('APP/file/' + file_obj.name + "", 'wb')    # 服务器创建上传同名的文件for line in file_obj.chunks():                      # 分块拿上传数据f.write(line)                                   # 循环写入拿到的数据块到服务器f.close()return HttpResponse(file_obj.name)

urls.py

from django.contrib import admin
from django.urls import path,re_path
from APP.views import Fupload,JAupload,JQuploadurlpatterns = [path('admin/', admin.site.urls),re_path('^f_upload.html$',Fupload.F_Upload),re_path('^ja_upload.html$',JAupload.JA_Upload),re_path('^jq_upload.html$',JQupload.JQ_Upload),
]

setting.py

INSTALLED_APPS添加建立的APP

'APP',

MIDDLEWARE

注释掉csrf部分
#'django.middleware.csrf.CsrfViewMiddleware',

TEMPLATES配置模版路径

'DIRS': [os.path.join(BASE_DIR, 'APP/templates')],

运行：

python manage.py runserver

访问：

http://127.0.0.1:8000/f_upload.html
http://127.0.0.1:8000/jq_upload.html
http://127.0.0.1:8000/ja_upload.html

Django文件上传***相关推荐

django文件上传到服务器,django上传文件的三种方式
Django文件上传需要考虑的重要事项文件或图片一般通过表单进行.用户在前端点击文件上传,然后以POST方式将数据和文件提交到服务器.服务器在接收到POST请求后需要将其存储在服务器上的某个地方.D ...
django文件上传
Django在处理文件上传时,文件数据被打包封装在request.FILES中. 一.简单上传首先,写一个form模型,它必须包含一个FileField: # forms.py from djang ...
Django(文件上传+分页+表单）
一.文件上传 form表单中需要添加 enctype="multipart/form-data" 1.media: 文件上传的文件在settings.py 文件中配置:MEDIA ...
Django 文件上传与下载的相关问题
一.文件上传 # 注意点1:需要过滤掉文件名中的中文字符,否则无法正常保存 newFileName = filter_chinese_and_punctuation_exclude_dot(newFi ...
django文件上传，只上传一张
并发条件下对于一个对象的不同图片进行操作,导致只有一张生效 class PersonalId(models.Model):imageface = models.ImageField(null=True ...
django 学习-13 Django文件上传
1..vim blog/views.py from django import forms from django.http import HttpResponse 1 2 from d ...
django 文件上传研究
http://python.usyiyi.cn/django/index.html http://python.usyiyi.cn/django/topics/http/file-uploads.ht ...
Python Django 文件上传代码示例
Django的边边角角（一）：模型继承、静态资源、文件上传
文章目录一.模型继承 1.概述 2.模型创建二.静态资源 1.静态资源和模板的区别 2.注意三.文件上传 1.源码实现 2.Django文件上传 3.显示图片一.模型继承 1.概述默认一个模 ...

Django文件上传***

项目架构

Django文件上传***相关推荐

最新文章

热门文章