框架----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 ...
随机推荐
- Python爬虫：爬取美拍小姐姐视频
最近在写一个应用,需要收集微博上一些热门的视频,像这些小视频一般都来自秒拍,微拍,美拍和新浪视频,而且没有下载的选项,所以只能动脑想想办法了. 第一步 分析网页源码. 例如:http://video. ...
- Tensorflow框架之AlexNet
from datetime import datetime import math import time import tensorflow as tf batch_size=32 num_batc ...
- 日本IT行业劳动力缺口达22万 在日中国留学生迎来就业好时机 2017/07/18 11:25:09
作者:倪亚敏 来源:日本新华侨报 发布时间:2017/07/18 11:25:09 据日本政府提供的数据,日本2018年应届毕业生的“求人倍率”已经达到了1.78倍.换言之,就是100名大学生 ...
- 全国城市一卡通一级TSM平台业务架构及意义
[导读]TSM平台是一种具有鲜明行业属性的平台,因此,各行业都建立了本行业的TSM平台.为促进城市一卡通行业移动支付的快速发展,住房和城乡建设部也建立了全国城市一卡通行业一级TSM平台. 作为住建部标 ...
- struts常量<constant>说明
1.<constant name="struts.action.extension" value="do" />这个时候访问action都必须加.d ...
- 02_Java基础_第2天（变量、运算符）_讲义
今日内容介绍 1.变量 2.运算符 01变量概述 * A: 什么是变量? * a: 变量是一个内存中的小盒子(小容器),容器是什么?生活中也有很多容器, * 例如水杯是容器,用来装载水:你家里的大衣柜 ...
- Storm事务Topology的接口介绍
ITransactionalSpout 基本事务Topology的Spout接口,内含两部分接口:协调Spout接口以及消息发送Blot接口. TransactionalSpoutBatchExe ...
- 3dContactPointAnnotationTool开发日志（二七）
今天的主要工作是把选中物体以及复制删除物体和右边三个面板联系起来,就是通过鼠标框选住物体,右边面板的对应项的颜色也会改变,而且通过右边面板也能控制物体的选中状态,被选中的物体成cyan青色,并且包 ...
- 1st 四人小组项目
小组名称:好好学习 项目组长:林莉 组员:王东涵.宫丽君.胡丽娜 项目选题:基于jsp的车库管理系统 项目期限:十周内<暂定> 需求分析:有待进一步思考
- 分享：50行代码监听watch小程序的globalData
监听方法: // 在任何组件.页面,例如页面 const app = getApp( ); Page({ onLoad: function( ) { app.watch$('role', ( val, ...