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) # ...
随机推荐
- 安装orcle10g oel5.6
一.安装OEL 5.6 二.安装VMware Tools 1) 选择菜单里的VM选项,里面有一个子选项是installVMware Tools,选择它. 2) 回到操作系统,将光驱挂载到/mnt ...
- 【Android】添加菜单和监听菜单方法详解
添加菜单 可以在onCreateOptionsMenu或者onPrepareOptionsMenu方法中来添加菜单 代码添加: menu.add((int groupId, int itemId, i ...
- [ES6] Promise
How to use: export default function getReplies(topicId){ return new Promise(function( resolve, rejec ...
- C#、.NET和ASP.NET三者之间的区别
刚毕业后出去找工作面试的时候就遇到这个问题!.回答不上来.回来网上查的如下: 那么 .NET.C#和ASP.NET这三者之间区别不清楚,到底它们之间有什么联系呢? 1..NET是一个平台,一个抽象的平 ...
- JS 无提示关闭当前窗口
function teseClose() { window.opener = null; window.open('','_self'); window.close(); }
- 查看 SELinux状态及关闭SELinux
查看SELinux状态: 1./usr/sbin/sestatus -v ##如果SELinux status参数为enabled即为开启状态 SELinux status: ...
- 学习OkHttp wiki--Interceptors
Interceptors 拦截器(Interceptors)是一种强有力的途径,来监控,改写和重试HTTP访问.下面是一个简单的拦截器,对流出的请求和流入的响应记录日志. class LoggingI ...
- 东软实训4-JDBC连接数据库
JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...
- ZOJ3557 How Many Sets II( Lucas定理)
转载请注明出处: http://www.cnblogs.com/fraud/ ——by fraud How Many Sets II Time Limit: 2 Seconds ...
- SQL语句中的乘号
在ADO中,我们需要在SQL语句中使用乘法运算,可是添加'*'以后执行程序总是会出错,这是因为‘*’与sql中的‘*’关键字重合了,所以编译会出错. 解决办法:将乘法运算放到sql语句外面,将结果放入 ...