框架----Django之文件上传
一、文件上传
1. 浏览器访问
http://127.0.0.1:8000/f1/ http://127.0.0.1:8000/f2/
2. urls
from django.conf.urls import url
from django.contrib import admin
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^f1/', views.f1),
url(r'^f2/', views.f2),
]
3. views
from django.shortcuts import render,redirect,HttpResponse
from app01 import models
from django.forms import Form
from django.forms import fields
from django.forms import widgets # **************************文件上传**************************
def f1(request):
if request.method == "GET":
return render(request,'f1.html')
else:
import os
# request.POST
file_obj = request.FILES.get('fafafa')
f = open(os.path.join('static',file_obj.name),'wb')
for chunk in file_obj.chunks():
f.write(chunk)
f.close()
# return render(request,'f1.html') # 上传成功后刷新当前页面
return HttpResponse('上传成功') # 上传完成后显示文字 class F2Form(Form):
user = fields.CharField()
fafafa = fields.FileField() def f2(request):
if request.method == "GET":
obj = F2Form()
return render(request,'f2.html',{'obj':obj})
else:
obj = F2Form(data=request.POST,files=request.FILES)
if obj.is_valid():
print(obj.cleaned_data.get('fafafa').name)
print(obj.cleaned_data.get('fafafa').size)
return render(request,'f2.html',{'obj':obj})
views
4. templates
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="/f1/" enctype="multipart/form-data">
{% csrf_token %}
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" value="提交" />
</form>
</body>
</html>
f1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="POST" action="/f2/" enctype="multipart/form-data">
{# 不能少了这个属性:enctype="multipart/form-data" ,否则后台拿不到数据 #} {% csrf_token %}
{{ obj.user }}
{{ obj.fafafa }}
<input type="submit" value="提交" />
</form>
</body>
</html>
f2.html
二、文件上传--------原生Ajax上传文件、jQuery Ajax上传文件、伪Ajax上传文件
1. 浏览器访问
http://127.0.0.1:8000/upload/
2. urls
from django.conf.urls import url
from django.contrib import admin
from app01 import views urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^upload/', views.upload),
]
3. views
from django.shortcuts import render,HttpResponse,redirect import os
def upload(request):
if request.method == 'GET':
return render(request,'upload.html')
else:
print(request.POST,request.FILES)
file_obj = request.FILES.get('fafafa')
file_path = os.path.join('static',file_obj.name)
with open(file_path,'wb') as f:
for chunk in file_obj.chunks():
f.write(chunk) return HttpResponse(file_path)
views
4. templates
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>原生Ajax上传文件</h1>
<input type="file" id="i1" />
<a onclick="upload1();">上传</a>
<div id="container1"></div> <h1>jQuery Ajax上传文件</h1>
<input type="file" id="i2" />
<a onclick="upload2();">上传</a>
<div id="container2"></div> <h1>伪 Ajax上传文件</h1>
<form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">
<iframe id="ifr" name="ifr" style="display: none"></iframe>
<input type="file" name="fafafa" />
<a onclick="upload3();">上传</a>
</form>
<div id="container3"></div> <script src="/static/jquery-1.12.4.js"></script>
<script> function upload1(){
var formData = new FormData();
formData.append('k1','v1');
formData.append('fafafa',document.getElementById('i1').files[0]); var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
var file_path = xhr.responseText;
var tag = document.createElement('img');
tag.src = "/"+ file_path;
document.getElementById('container1').appendChild(tag); }
};
xhr.open('POST','/upload/');
xhr.send(formData);
} function upload2(){
var formData = new FormData();
formData.append('k1','v1');
// formData.append('fafafa',document.getElementById('i1').files[0]);
formData.append('fafafa',$('#i2')[0].files[0]);
// $('#i2') -> $('#i2')[0]
// document.getElementById('i1') -> $(document.getElementById('i1')) $.ajax({
url: '/upload/',
type: 'POST',
data: formData,
contentType:false,
processData:false,
success:function(arg){
var tag = document.createElement('img');
tag.src = "/"+ arg;
$('#container2').append(tag);
}
})
} function upload3(){
document.getElementById('ifr').onload = loadIframe;
document.getElementById('f1').submit(); }
function loadIframe(){
var content = document.getElementById('ifr').contentWindow.document.body.innerText;
var tag = document.createElement('img');
tag.src = "/"+ content;
$('#container3').append(tag);
}
</script>
</body>
</html>
upload.html
5. 执行结果截图
框架----Django之文件上传的更多相关文章
- python Django之文件上传
python Django之文件上传 使用Django框架进行文件上传共分为俩种方式 一.方式一 通过form表单进行文件上传 #=================================== ...
- Struts2框架下的文件上传文件类型、名称约定
Struts2框架下的文件上传机制:1.通过multipart/form-data form提交文件到服务器2.文件名是通过什么地方设置的?在strust2的FileUploadInterceptor ...
- day56:django:csrf_token&文件上传
目录 1.csrf介绍 2.django实现csrf_token认证 3.django实现文件上传 csrf介绍 什么是csrf? csrf:跨站请求伪造.攻击者通过HTTP请求将数据传送到服务器,从 ...
- HTML5——摒弃插件和前端框架的异步文件上传
之前我从来没有体会到HTML5的便利,直到这次需要一个异步上传的功能功能.一开始我以为文件的一些声明必须为HTML5才管用,后来才知道添加了很多以前没有的标签,并可以直接播放视频,音频等.可以不再使用 ...
- Django(十七)文件上传
http://www.cnblogs.com/wupeiqi/articles/5703697.html - 文件上传 - 普通上传 - 自定义页面上传按钮 ...
- Bottle + WebUploader 修改Bottle框架从而大文件上传实现方案
Bottle 是个轻量级的Web框架,小巧又强大,真不愧是个轻量级的框架.可扩展性非常好,可以扩展很多功能,但是有些功能就不得不自己动手修改了. Bottle:http://www.bottlepy. ...
- Django的文件上传以及预览、存储
思路: 文件上传通过前端的input标签,input设置display:none属性. 内容显示需要让前端通过<img>标签读取图片内容,可以通过<label>标签连接< ...
- ssm框架下实现文件上传
1.由于ssm框架是使用Maven进行管理的,文件上传所需要的jar包利用pom.xml进行添加,如下所示: <properties> <commons-fileupload.v ...
- Django实现文件上传功能
文件上传 关注公众号"轻松学编程"了解更多. 1.创建上传文件夹 在static文件夹下创建uploads用于存储接收上传的文件 在settings中配置,MEDIA_ROOT=o ...
随机推荐
- 英特尔® 实感™ 深度摄像头代码示例 – R200 摄像头数据流
英特尔开发人员专区原文地址 简介 该可下载代码示例展示了如何使用面向 Windows 的英特尔® 实感™ SDK* 捕捉和查看用 C#/XAML 编写的原始 R200 摄像头数据流. Visual S ...
- Centos下安装并设置nginx开机自启动
一.在centos环境下安装下载并安装nginx,由于nginx需要依赖一些环境才能安装,主要依赖g++.gcc.openssl-devel.pcre-devel和zlib-devel这些环境,首先得 ...
- mui搜索框 搜索点击事件
<div class="mui-input-row mui-search"> <input type="search" class=" ...
- 福大软工1816：Beta（6/7）
Beta 冲刺 (6/7) 队名:第三视角 组长博客链接 本次作业链接 团队部分 团队燃尽图 工作情况汇报 张扬(组长) 过去两天完成了哪些任务 文字/口头描述 组织会议 开发wxpy部分功能 展示G ...
- HDU 5418 Victor and World 允许多次经过的TSP
题目链接: hdu: http://acm.hdu.edu.cn/showproblem.php?pid=5418 bestcoder(中文): http://bestcoder.hdu.edu.cn ...
- lintcode-198-排列序号II
198-排列序号II 给出一个可能包含重复数字的排列,求这些数字的所有排列按字典序排序后该排列在其中的编号.编号从1开始. 样例 给出排列[1, 4, 2, 2],其编号为3. 思路 和 lintco ...
- 阿里云服务器内部dns可能出错
今天部署一个阿里云服务器,所有配置项都改好了,就是连接不上本机. 反复查找,防火墙端口和网卡接口都配置对了,selinux也关闭了,但就是连接不上阿里云内网的ip. 由于连接是本机,把ip填写为127 ...
- 软工网络15团队作业4——Alpha阶段敏捷冲刺-7
一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 进一步优化功能与完善服务器. 明天计划完成的工作: 服务器是需要完善,后端的配置还需要修改. 工作中遇到的困难: 今日遇到的困难是服务器后端 ...
- jQuery的滚动监听
jQuery的滚动监听 1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offs ...
- Java MD5加密类
/************************************************* md5 类实现了RSA Data Security, Inc.在提交给IETF 的RFC1321中 ...