Django之上传文件
使用Form表单上传文件
- upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{# 上传文件的时候必须要在form标签中添加属性 enctype="multipart/form-data" #}
<form method="POST" action="/upload/" enctype="multipart/form-data">
<input type="text" name="user" />
<input type="file" name="img" />
<input type="submit" />
</form>
</body>
</html>
- views.py
from django.shortcuts import render
import os
# Create your views here.
def upload(request):
if request.method == "POST":
user = request.POST.get("user")
# img = request.POST.get("img") # 所有提交的文件名
img = request.FILES.get('img') # 所有提交的文件
img_name = img.name # 获取文件名
img_abs_name = os.path.join("static", img_name)
with open(img_abs_name, "wb") as f:
for chunk in img.chunks():
f.write(chunk)
return render(request, 'upload.html')
上传完之后可以通过链接 “http://127.0.0.1:8000/static/文件名” 打开图片
使用js原生XMLHttpRequest对象进行ajax上传文件
- upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="user" name="user" />
<input type="file" id="img" name="img" />
<input type="button" value="上传图片" onclick="uploadFile1();"/>
<script>
// 使用原生的 XMLHttpRequest 上传图片
function uploadFile1() {
var form = new FormData();
form.append("user", document.getElementById("user").value);
// 获取文件对象
var fileObj = document.getElementById("img").files[0];
form.append("img", fileObj);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4){
// 已经接受到全部响应数据,执行以下操作
var data = xhr.responseText;
console.log(data);
}
};
xhr.open("POST", "/upload/", true);
xhr.send(form);
}
</script>
</body>
</html>
- views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse
import os
# Create your views here.
def upload(request):
if request.method == "POST":
user = request.POST.get("user")
# img = request.POST.get("img") # 所有提交的文件名
img = request.FILES.get('img') # 所有提交的文件
img_name = img.name
img_abs_name = os.path.join("static", img_name)
with open(img_abs_name, "wb") as f:
for chunk in img.chunks():
f.write(chunk)
return HttpResponse("ok")
return render(request, 'upload.html')
使用jQuery 的ajax上传文件
该方法需要借助js原生的FormData()将数据封装到该对象中,并且不支持低版本的浏览器,例如ie5、ie6
- upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="user" name="user" />
<input type="file" id="img" name="img" />
<input type="button" value="上传图片" onclick="jQueryAjax();"/>
<script src="/static/jquery/jquery-1.12.4.js"></script>
<script>
function jQueryAjax() {
// 获取文件对象
var fileObj = $("#img")[0].files[0];
// 创建FormData对象
var form = new FormData();
// 将数据封装到对象中
form.append("img", fileObj);
form.append("user", "aa");
$.ajax({
type: "POST",
url: "/upload/",
data: form,
processData: false,
contentType: false, # 不设置请求头
sucess: function (arg) {
console.log(arg);
}
})
}
</script>
</body>
</html>
- views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse
import os
import json
# Create your views here.
def upload(request):
if request.method == "POST":
user = request.POST.get("user")
# img = request.POST.get("img") # 所有提交的文件名
img = request.FILES.get('img') # 所有提交的文件
img_name = img.name
img_abs_name = os.path.join("static", img_name)
print(img_abs_name)
with open(img_abs_name, "wb") as f:
for chunk in img.chunks():
f.write(chunk)
return HttpResponse("ok")
return render(request, 'upload.html')
使用jQuery 的ajax + iframe 解决浏览器兼容性的问题
- upload1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<iframe id="my_iframe" name="my_iframe" style="display:none" src="" ></iframe>
<form id="fo" method="POST" action="/upload1/" enctype="multipart/form-data">
<input type="text" id="user" name="user" />
<input type="file" id="img" name="img" onchange="uploadFile();" />
<input type="submit">
</form>
<div id="container">
</div>
<script src="/static/jquery/jquery-1.12.4.js"></script>
<script>
function uploadFile() {
$("#container").find("img").remove();
document.getElementById("my_iframe").onload = callback;
document.getElementById("fo").target = "my_iframe";
document.getElementById("fo").submit();
}
function callback() {
// 想获取iframe中的标签必须使用.contents来获取
var text = $("#my_iframe").contents().find('body').text();
var json_data = JSON.parse(text);
if (json_data.status){
// 上传成功
// 生成img标签,预览刚才上传成功的图片
var tag = document.createElement("img");
tag.src = "/" + json_data.data;
tag.className = "img";
$("#container").append(tag);
}else{
alert(json_data.error);
}
}
</script>
</body>
</html>
- views.py
from django.shortcuts import render
from django.shortcuts import HttpResponse
import os
import json
# Create your views here.
def upload1(request):
if request.method == "POST":
ret = {
"status": False,
"data": None,
"error": None,
}
try:
img = request.FILES.get("img")
img_name = img.name
img_abs_name = os.path.join("static", img_name)
print(img_abs_name)
with open(img_abs_name, "wb") as f:
for chunk in img.chunks():
f.write(chunk)
ret["status"] = True
ret["data"] = img_abs_name
except Exception as e:
ret["error"] = str(e)
return HttpResponse(json.dumps(ret))
return render(request, "upload1.html")
Django之上传文件的更多相关文章
- django之上传文件和图片
文件上传:文件上传功能是网站开发中必定会使用到的技术,在django项目中也是如此,下面会详细讲述django中上传文件的前端和后端的具体处理步骤: 前端HTML代码实现: 1.在前端中,我们需要填入 ...
- (转)django上传文件
本文转自:http://www.cnblogs.com/linjiqin/p/3731751.html 另: 本文对原文做了适当修改 更为详细的介绍可以参考官方文档. emplate html(模板 ...
- django上传文件
template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...
- 实现简单的django上传文件
本文用django实现上传文件并保存到指定路径下,没有使用forms和models,步骤如下: 1.在模板中使用form表单,因为这个表单使用于上传文件的,所以method属性必须设置为post,而且 ...
- 8. Django系列之上传文件与下载-djang为服务端,requests为客户端
preface 运维平台新上线一个探测功能,需要上传文件到服务器上和下载文件从服务器上,那么我们就看看requests作为客户端,django作为服务器端怎么去处理? 对于静态文件我们不建议通过dja ...
- FTP文件操作之上传文件
上传文件是一个比较常用的功能,前段时间就做了一个上传图片的模块.开始采用的是共享文件夹的方式,后来发现这种方法不太好.于是果断将其毙掉,后来选择采用FTP的方式进行上传.个人感觉FTP的方式还是比较好 ...
- Django上传文件和上传图片(不刷新页面)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Django上传文件的那些参数
# ################## 默认文件上传配置 ######################## from django.core.files.uploadhandler import M ...
- 20-1 django上传文件和项目里上传头像如何查看
一 普通上传方式 1 views def upload(request): if request.method == "POST": # print(request.POST) # ...
随机推荐
- ARC代码和非ARC代码 混用
选中工程->TARGETS->相应的target然后选中右侧的“Build Phases”,向下就找到“Compile Sources”了.然后在相应的文件后面添加:-fobjc-arc参 ...
- 详解C++ friend关键字
1. 为什么要使用友元? 通常对于普通函数来说,要访问类的保护成员是不可能的,如果想这么做那么必须把类的成员都生命成为 public( 共用的) ,然而这做带来的问题遍是任何外部函数都可以毫无约束的访 ...
- RHEL6.3进入单用户模式并重置root密码
单用户模式类似于windows下的安全模式,允许root账号不输入密码直接启动并登录系统进行系统维护. 单用户模式只允许root账号登录,不允许其它用户使用ssh协议进行远程连接. 重启系统时按Ent ...
- 显示目录树命令tree
-a:显示所有文件,包括隐藏文件 -d:只显示目录 -f:显示完整的文件名,包含路径 -L:显示目录树的深度 [root@rusky /]# tree -L -a -f /home /home |-- ...
- java基础之导入(药师点评)
/** * 药师点评的导入 * @param request * @param response * @param f * @param tmallTcMessageImport * @return ...
- iOS 中实现随机颜色
开发中为了测试能够快速看到效果很多时候我们对颜色采用随机颜色 代码块如下 UIColor * randomColor= [UIColor colorWithRed:((float)arc4random ...
- 【转】c/c++各种字符、字符串类型转换
itoa 功 能:把一整数转换为字符串 用 法:char *itoa(int value, char *string, int radix); 详细解释:itoa是英文integer to ...
- Mysql中的 的 Cascade ，NO ACTION ，Restrict ，SET NULL
转载自:http://blog.163.com/inflexible_simple/blog/static/1676946842011616102543931/ 外键约束对子表的含义: 如果在父 ...
- PHP二维数组排序函数
PHP一维数组的排序可以用sort(),asort(),arsort()等函数,但是PHP二维数组的排序需要自定义. 以下函数是对一个给定的二维数组按照指定的键值进行排序,先看函数定义: functi ...
- webpack ，react
一小时包教会 —— webpack 入门指南 http://***/Article/50764 ------------------ 轻松入门React和Webpack http://www.in ...