Django 练习班级管理系统八 -- 上传文件
Form表单上传文件
修改 views.py
import os
def upload(request):
if request.method == 'GET':
img_list = models.Img.objects.all()
return render(request, 'upload.html', {'img_list': img_list})
elif request.method == 'POST':
name = request.POST.get('user')
obj = request.FILES.get('fafafa')
# 保存上传的文件
file_path = os.path.join('static', 'upload', obj.name)
f = open(file_path, 'wb')
for chunk in obj.chunks():
f.write(chunk)
f.close()
models.Img.objects.create(path=file_path)
# 返回并刷新页面
return redirect('upload.html')
修改 models.py
class Img(models.Model):
path = models.CharField(max_length=128)
在 templates 下添加 upload.html 文件，内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="/upload.html" enctype="multipart/form-data">
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" value="提交" />
</form>
<div>
{% for item in img_list %}
<img style="height: 200px; width: 200px;" src="/{{ item.path }}">
{% endfor %}
</div>
</body>
</html>
修改 urls.py
# 添加
re_path('upload.html', views.upload),
重新生成数据库
python manage.py makemigrations
python manage.py migrate
Ajax 上传文件
修改 upload.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="container" id="imgs">
{% for img in img_list %}
<img src="/{{ img.path }}">
{% endfor %}
</div>
<input type="file" id="img" />
<input type="button" value="提交XML" onclick="UploadXML()" />
<input type="button" value="提交JQ" onclick="Uploadjq()" />
<script src="/static/jquery.min.js"></script>
<script>
function UploadXML() {
var dic = new FormData(); // 通过FormData构造函数创建一个空对象
dic.append('user', 'v1'); // 通过append()方法在末尾追加 key 为 user 值为 v1 的数据
dic.append('fafafa', document.getElementById('img').files[0]);
var xml = new XMLHttpRequest();
xml.open('post', '/upload.html', true); // 参数说明: 请求方式；请求路径；是否异步处理，true为异步
xml.onreadystatechange = function () { // readyState 改变时触发
if(xml.readyState == 4){ // xml.readyState: XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
var obj = JSON.parse(xml.responseText); // responseText 服务器接收到的响应体（不包括头部）
if(obj.status){
var img = document.createElement('img'); // 创建一个元素
img.src = "/"+obj.path;
document.getElementById('imgs').appendChild(img);
}
}
};
xml.send(dic); // 发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
}
function Uploadjq() {
var dic = new FormData();
dic.append('user', 'v1');
dic.append('fafafa', document.getElementById('img').files[0]);
$.ajax({
url: 'upload.html',
type: 'POST',
data: dic,
processData: false, // jQuery不要去处理发送的数据
contentType: false, // jQuery不要去设置Content-Type请求头
dataType: 'JSON',
success: function (arg) { // 响应的数据是 arg
if(arg.status){
var img = document.createElement('img');
img.src = "/" + arg.path;
$('#imgs').append(img);
}
}
})
}
</script>
</body>
</html>
修改 views.py 文件
import os
import json
def upload(request):
if request.method == 'GET':
img_list = models.Img.objects.all()
return render(request, 'upload.html', {'img_list': img_list})
elif request.method == 'POST':
user = request.POST.get('user')
obj = request.FILES.get('fafafa')
file_path = os.path.join('static', 'upload', obj.name)
f = open(file_path, 'wb')
for chunk in obj.chunks():
f.write(chunk)
f.close()
models.Img.objects.create(path=file_path)
ret = {'status': True, 'path': file_path} # 返回响应数据是字典
return HttpResponse(json.dumps(ret))
基于iframe实现form上传文件
修改 upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<!--
<h1>测试Iframe功能</h1>
<input type="text" id="url" />
<input type="button" value="点我" onclick="iframeChange();" />
<iframe id="ifr" src=""></iframe>
<hr/>
-->
<h1>基于iframe实现form提交</h1>
<!-- 表单提交的 target 为 iframe_2 -->
<form action="/upload.html" method="post" target="iframe_2" enctype="multipart/form-data">
<!-- onload 事件的用处: 当页面载入完毕后执行Javascript代码 -->
<iframe style="display: none" id="iframe_1" name="iframe_2" src="" onload="loadIframe();"></iframe>
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" />
</form>
<div class="container" id="imgs">
{% for img in img_list %}
<img src="/{{ img.path }}">
{% endfor %}
</div>
<input type="file" id="img" />
<input type="button" value="提交XML" onclick="UploadXML()" />
<input type="button" value="提交JQ" onclick="Uploadjq()" />
<script src="/static/jquery.min.js"></script>
<script>
function UploadXML() {
var dic = new FormData();
dic.append('user', 'v1');
dic.append('fafafa', document.getElementById('img').files[0]);
var xml = new XMLHttpRequest();
xml.open('post', '/upload.html', true);
xml.onreadystatechange = function () {
if(xml.readyState == 4){
var obj = JSON.parse(xml.responseText);
if(obj.status){
var img = document.createElement('img');
img.src = "/"+obj.path;
document.getElementById('imgs').appendChild(img);
}
}
};
xml.send(dic);
}
function Uploadjq() {
var dic = new FormData();
dic.append('user', 'v1');
dic.append('fafafa', document.getElementById('img').files[0]);
$.ajax({
url: 'upload.html',
type: 'POST',
data: dic,
processData: false,
contentType: false,
dataType: 'JSON',
success: function (arg) {
if(arg.status){
var img = document.createElement('img');
img.src = "/" + arg.path;
$('#imgs').append(img);
}
}
})
}
function iframeChange() {
var url = $('#url').val();
$('#ifr').attr('src', url);
}
function loadIframe() {
var str_json = $('#iframe_1').contents().find('body').text(); //根据view.py 的定义，服务端返回的内容为：{"status": true, "path": "static\\upload\\1.png"}
var obj = JSON.parse(str_json);
if (obj.status){
var img = document.createElement('img');
img.src = "/" + obj.path;
$('#imgs').append(img);
}
}
</script>
</body>
</html>
Django 练习班级管理系统八 -- 上传文件的更多相关文章
- django 基于form表单上传文件和基于ajax上传文件
一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...
- Django和Ueditor自定义存储上传文件的文件名
django台后默认上传文件名 在不使用分布式文件存储系统等第三方文件存储时,django使用默认的后台ImageField和FileField上传文件名默认使用原文件名,当出现同名时会在后面追加下随 ...
- django + dropzone.js 上传文件
1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...
- Django session cookie 上传文件、详解
session 在这里先说session 配置URL from django.conf.urls import patterns, include, url from django.contrib i ...
- 4 django系列之HTML通过form标签来同时提交表单内容与上传文件
preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...
- (转)django上传文件
本文转自:http://www.cnblogs.com/linjiqin/p/3731751.html 另: 本文对原文做了适当修改 更为详细的介绍可以参考官方文档. emplate html(模板 ...
- django上传文件
template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...
- 使用django表单，使网页添加上传文件，并分析文件。
开发环境是: apache + python + django+ eclipse(开发环境) 欲达到目的: 在网页上,添加上传文件控件.然后读取csv文件,并分析csv文件. 操作步骤: django ...
- 实现简单的django上传文件
本文用django实现上传文件并保存到指定路径下,没有使用forms和models,步骤如下: 1.在模板中使用form表单,因为这个表单使用于上传文件的,所以method属性必须设置为post,而且 ...
随机推荐
- Linux PXE + Kickstart 自动装机
大规模装机时,使用无人值守装机便可大大简便人工操作,提高效率. PXE 网络安装 配置双网卡 这里ens33为nat网络,ens37为仅主机网络,配置ens37 [root@localhost ~]# ...
- Python入门基础学习(函数)
Python基础学习笔记(三) 函数的概念: 所谓函数,就是把具有独立功能的代码块组织为一个小模块,在需要的时候调用 函数的使用包含两个步骤: 1.定义函数 --封装独立的功能 2.调用函数 --享受 ...
- 杂项记录 arm64 的一些特性
函数返回值:arm64 规定了整数型返回值放在 x0 寄存器里 sp(栈空间)字节对齐:该临时变量占用 4字节空间:又因为 arm64 下对于使用 sp 作为地址基址寻址的时候,必须要 16byte- ...
- react的路由权限控制
在使用路由的时候,有的时候我们的界面只能够在登录之后才可以看的到,这个时候就需要使用路由权限控制了 找了资料发现一个就是我使用的方法,一个是高阶组件. 原谅菜鸟看不太懂不会使用高阶组件………… 首先在 ...
- Vue生命周期钩子---2
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...
- 实时获取input框内容
源码: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncod ...
- 编译安装nmap
官方编译文档 参考 安装对应的库,并编译安装.
- 【LGR-060】洛谷10月月赛 I div.1&div.2
Preface 一边打一边写作文打的像shit,T2失智严重特判错了233 Orz Div1 Rank2的foreverlastnig聚聚,顺便说一句显然Luogu的比赛质量比以往显著提高了啊 以下题 ...
- Unity 插件宝典 (张忠喜 廖一庭 著)
第1章 模型类插件 第2章 特效类插件 第3章 动画插件 第4章 编辑器插件 第5章 脚本类插件 第6章 GUI插件 第7章 Shaders插件 第8章 优化类插件 第9章 综合应用----卡通版赛车 ...
- C++ 回调函数的多种用法
什么是回调函数, 就是以函数指针做参数传递给另一个函数称之为回调函数, 字面意思很简单, 但就这几个字想理解回调函数, 那又很难.因此别就这这字面意思, 只要知道怎么用, 在什么情况下用就行了 什么场 ...