Django文件上传三种方式以及简单预览功能
主要内容：
一、文件长传的三种方式
二、简单预览功能实现
| 一、form表单上传 |
1.页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="{% url 'upload' %} " method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="img">
<input type="submit">
</form>
</body>
</html>
2.后端view函数处理
def upload(request):
if request.method=="GET":
return render(request,'upload.html')
elif request.method=="POST":
res={"status":"success","code":999}
img_obj=request.FILES.get('img')#获取文件对象
with open(os.path.join('static',img_obj.name),"wb") as f:
for chunk in img_obj.chunks(chunk_size=1024):
f.write(chunk)
return HttpResponse(json.dumps(res))
| 二、利用Jquery中ajax+FormData实现上传文件 |
FormData使用方式：
- 创建一个空的FormData对象，然后再用append方法逐个增加键值对
var formdata = new FormData();
formdata.append("name","xx");
formdata.append("flie", filename);
- 取得form元素对象，将它作为参数传入FormData对象中。
var formOjb = document.getElementById("form");
var formdata = new FormData(formOjb );
- 利用form元素对象的getFormData方法生成它
var formobj = document.getElementById("form");
var formdata = formobj.fetFormData();
1.页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <form action="{% url 'upload' %} " method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="img">
</form>
<span style="padding: 5px;color: royalblue" onclick="Jqajax();">jq上传</span>
<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/jquery.cookie.js"></script>
<script> function Jqajax() {
var file_obj=$('input[name="img"]')[0].files[0];//获取dom形式的文件对象
var form_obj=new FormData(); //创建formdata对象
form_obj.append('img',file_obj); //将文件对象加载formdata中
$.ajaxSetup({ //设置csrf_token
beforeSend: function (xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", $.cookie("csrftoken"));
}
});
$.ajax({
type: 'POST',
url: '{% url 'upload' %}',
data: form_obj,//指明发送的文件对象
processData: false, // 告诉jquery要传输data对象
contentType: false, // 告诉jquery不需要增加请求头对于contentType的设置
success: function (data) {
console.log(data)
}
})
}
</script>
</body>
</html>
后端处理逻辑不变
| 三、基于iframe实现伪ajax文件上传 |
原理：iframe数据提交不刷新页面
好处：通过iframe的src属性进行上传功能，这样的好处不用依赖FormData对象，低版本浏览器可能不支持该对象。
前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="{% url 'upload' %}" method="post" target="iframe_1" enctype="multipart/form-data">
{% csrf_token %}
<iframe style="display: none" id="iframe_1" name="iframe_1" src=""></iframe>
<input type="file" name="img" />
<input type="submit" onclick="iframeSubmmit();" value="iframe上传"/>
</form>
<script type="text/javascript" src="/static/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/static/jquery.cookie.js"></script>
<script>
function iframeSubmmit() {
$('#iframe_1').load(function () {//用户获取上传成功以后的返回值
var text=$('#iframe_1').contents().find('body').text();
var obj=JSON.parse(text);
console.log(obj) ;
})
}
</script>
</body>
</html>
后端处理逻辑一样
| 四、图片预览功能 |
原理：通过图片上传时候服务端返回文件路径，然后使用js设置a标签src属性实现预览功能
后端代码：
def upload(request):
if request.method=="GET":
return render(request,'upload.html')
elif request.method=="POST":
img_obj=request.FILES.get('img')#获取文件对象
file_path=os.path.join('static',img_obj.name)
res={"status":"success","code":999,"file_path":file_path}
with open(os.path.join(file_path,"wb") as f:
for chunk in img_obj.chunks(chunk_size=1024):
f.write(chunk)
return HttpResponse(json.dumps(res))
Django文件上传三种方式以及简单预览功能的更多相关文章
- 头像截图上传三种方式之一（一个简单易用的flash插件）（asp.net版本）
flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...
- python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- django文件上传、图片验证码、抽屉数据库设计
1.Django文件上传之Form方式 settings.py, ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [ 'django.contrib.admin', 'd ...
- 文件上传三：base64编码上传
介绍三种上传方式: 文件上传一:伪刷新上传 文件上传二:FormData上传 文件上传三:base64编码上传 Flash的方式也玩过,现在不推荐用了. 优点: 1.浏览器可以马上展示图像,不需要先上 ...
- Ajax文件上传三式
文件上传(三式) 1.urls.py文件 url(r'^upload.html$', views.upload), 2.views.py文件 import os def upload(request) ...
- Django文件上传下载与富文本编辑框
django文件上传下载 上传 配置settings.py # 设定文件的访问路径,如:访问http://127.0.0.1:8000/media/就可以获取文件 MEDIA_URL = '/medi ...
- 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0
实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...
- Python菜鸟之路：Django 文件上传的几种方式
方式一:通过form表单中,html input 标签的“file”完成 # 前端代码uoload.html <form method="post" action=" ...
- Django文件上传（经典上传方式）
经典文件上传方式 创建URL from django.contrib import admin from django.urls import path from django.conf.urls i ...
随机推荐
- chrome console的使用 ： 异常和错误的处理 – Break易站
本文内容来自:chrome console的使用 : 异常和错误的处理 – Break易站 利用 Chrome DevTools 提供的工具,您可以修复引发异常的网页和在 JavaScript 中调试 ...
- 极光配置-》thinkphp3.2.3
1,小白我搞了几天,终于得到了这样的结果(我猜应该是成功了吧). { "body": { "sendno": "100000", " ...
- [闲的蛋疼系列]从零开始用TypeScript写React的UI组件(0)-先写一个Button??
0.咸鱼要说的 一入前端深似海,咸鱼入海更加咸. 最近闲的蛋疼,手上年前的事也完成了7788了,借助[PG1]的话来说,我们要keep real. 咸鱼肯定不real 了,因为我们都活在梦里,所以咱们 ...
- go语言 前言
1什么是Go? Go是一门开源.并发支持.具有垃圾回收机制.编译性系统编程语言.在静态编译语言的高性能和动态语言的高效开发之间拥有良好平衡点.被称为21世纪的C语言.Go语言已经成为云计算.云存储时代 ...
- python3之socket&socketserver网络编程
1.套接字与套接模块 套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并进行连接,如发送和接受数据.为了 ...
- 8086cpu中的标志寄存器与比较指令
在8086CPU中有一个特殊的寄存器--标志寄存器,该寄存器不同于其他寄存器,普通寄存器是用来存放数据的读取整个寄存器具有一定的含义,但是标志寄存器是每一位都有固定的含义,记录在运算中产生的信息,标志 ...
- php 抽象类和接口类
PHP中抽象类和接口类都是特殊类,通常配合面向对象的多态性一起使用. 相同: ①两者都是抽象类,都不能实例化. ②只有接口类的实现类和抽象类的子类实现了 已经声明的 抽象方法才能被实例化. 不同: ① ...
- VS2015配置内核WDK7600环境,32位下.
VS2015配置内核WDK7600环境,32位下. 学习内核驱动的编写,就要会配置环境.不然总是用记事本编写.比较不方便. 环境配置如下. 1.首先下载WDK7600, 课堂资料代码中已经上传.链接: ...
- echart
先介绍echart: 官网: http://echarts.baidu.com 看名字就知道是百度出品的. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC ...
- ASP.NET Core中使用IOC三部曲(一.使用ASP.NET Core自带的IOC容器)
前言 本文主要是详解一下在ASP.NET Core中,自带的IOC容器相关的使用方式和注入类型的生命周期. 这里就不详细的赘述IOC是什么 以及DI是什么了.. emm..不懂的可以自行百度. 目录 ...