上传方式:

- Form表单上传文件
- Ajax上传文件
- 基于form表单和iframe自己实现ajax请求

1,创建项目

2,settings配置(注册app01,static路径等等这些)及url添加(略过)

3,views视图函数

form的视图收到了在request.FILES中的文件数据。从上述form来的数据可以通过request.FILES['file']来存取。
特别注意的是,只有当request方法是POST,且发送request的<form>有属性enctype="multipart/form-data"时,request.FILES中包含文件数据,否则request.FILES为空。

from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json import os
def upload(request):
if request.method == 'GET':
img_list = models.Img.objects.all()
return render(request,'upload.html',{'img_list': img_list})
elif request.method == "POST":
user = request.POST.get('user')
fafafa = request.POST.get('fafafa') obj = request.FILES.get('fafafa')
# print(obj.name,obj.size) #读取文件名称和大小,返回后台
# print(user,fafafa)
file_path = os.path.join('static','upload',obj.name)
f = open(file_path, 'wb')
for chunk in obj.chunks():
f.write(chunk)
f.close()
models.Img.objects.create(path=file_path) ret={'status':True,'path':file_path}
return HttpResponse(json.dumps(ret))

4,文件操作方法

obj.read():从文件中读取整个上传的数据,这个方法只适合小文件;

obj.chunks():按块返回文件,通过在for循环中进行迭代,可以将大文件按块写入到服务器中;

obj.multiple_chunks():这个方法根据myFile的大小,返回True或者False,当myFile文件大于2.5M(默认为2.5M,可以调整)时,该方法返回True,否则返回False,因此可以根据该方法来选择选用read方法读取还是采用chunks方法

obj.name:这是一个属性,不是方法,该属性得到上传的文件名,包括后缀,如123.exe;

obj.size:这也是一个属性,该属性得到上传文件的大小。

5.1 form 上传

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="POST" action="/upload.html" enctype="multipart/form-data">
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" value="提交" />
</form> <div>
{% for item in img_list %}
<img style="height: 200px;width: 200px;" src="/{{ item.path }}" />
{% endfor %}
</div> </body>
</html>

5.2 原生的ajax Http请求上传文件方法

涉及到两个对象FormData和XMLHttpRequest

利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

XMLHttpRequest 是一个 JavaScript 对象,它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议.

语法var myRequest = new XMLHttpRequest();

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="container">
{% for img in img_list %}
<img src="/{{ img.path }}">
{% endfor %}
</div>
<input type="file" id="imgs" />
<input type="button" value="提交" onclick="UploadXML()" />
<script>
function UploadXML() {
var dic = new FormData();
dic.append('user', 'v1');//append() 给当前FormData对象添加一个键/值对,name字段名称.value字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
dic.append('fafafa', document.getElementById('imgs').files[0]);
console.log(dic);
var xml = new XMLHttpRequest();
xml.open('post', '/upload.html', true);
xml.onreadystatechange = function () {
if(xml.readyState == 4){
var obj = JSON.parse(xml.responseText);
if(obj.status){
var img = document.createElement('img');
img.src = "/" + obj.path;
document.getElementById("imgs").appendChild(img);
}
}
};
xml.send(dic);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
}
</script>
</body>
</html>

5.4 jQuery Ajax上传,同时使用了iframe,一下代码包含了两种方法。即:

1-利用JQuery Ajax + FormData进行文件上传
2-基于Iframe实现伪Ajax 上传文件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width: 200px;
height: 200px;
}
</style>
<script>
function li(arg) {
console.log(arg);
}
</script>
</head>
<body>
<h1>测试Iframe功能</h1>
<input type="text" id="url" />
<input type="button" value="点我" onclick="iframeChange();" />
<iframe id="ifr" src=""></iframe>
<hr/>
<h1>基于iframe实现form提交</h1>
<form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
<iframe style="display: none" id="iframe_1" name="iframe_1" src="" onload="loadIframe();"></iframe>
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" />
</form>
<h1>图片列表</h1>
<div class="container" id="imgs">
{% for img in img_list %}
<img src="/{{ img.path }}">
{% endfor %}
</div> <input type="file" id="img" />
<input type="button" value="提交XML" onclick="UploadXML()" />
<input type="button" value="提交JQ" onclick="Uploadjq()" />
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
function UploadXML() {
var dic = new FormData();
dic.append('user', 'v1');
dic.append('fafafa', document.getElementById('img').files[0]);
var xml = new XMLHttpRequest();
xml.open('post', '/upload.html', true);
xml.onreadystatechange = function () {
if(xml.readyState == 4){
var obj = JSON.parse(xml.responseText);
if(obj.status){
var img = document.createElement('img');
img.src = "/" + obj.path;
document.getElementById("imgs").appendChild(img);
}
}
};
xml.send(dic);
}
function Uploadjq() {
var dic = new FormData();
dic.append('user', 'v1');
dic.append('fafafa', document.getElementById('img').files[0]);
$.ajax({
url: '/upload.html',
type: 'POST',
data: dic,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
dataType: 'JSON',
success: function (arg) {
if (arg.status){
var img = document.createElement('img');
img.src = "/" + arg.path;
$('#imgs').append(img);
}
}
})
}
function iframeChange() {
var url = $('#url').val();
$('#ifr').attr('src', url);
}
function loadIframe() {
console.log(1);
// 获取iframe内部的内容
var str_json = $('#iframe_1').contents().find('body').text();
var obj = JSON.parse(str_json);
if (obj.status){
var img = document.createElement('img');
img.src = "/" + obj.path;
$('#imgs').append(img);
}
}
</script>
</body>
</html>

  

Python Web框架篇:Django文件上传的更多相关文章

  1. python+selenium基础篇,文件上传

    1.百度查询图片,上传文件 2.实现代码如下: from selenium import webdriverfrom time import sleepdr=webdriver.Firefox()dr ...

  2. Struts2第六篇【文件上传和下载】

    前言 在讲解开山篇的时候就已经说了,Struts2框架封装了文件上传的功能--..本博文主要讲解怎么使用Struts框架来完成文件上传和下载 回顾以前的文件上传 首先,我们先来回顾一下以前,我们在we ...

  3. django文件上传、图片验证码、抽屉数据库设计

    1.Django文件上传之Form方式 settings.py, ALLOWED_HOSTS = ['*'] INSTALLED_APPS = [ 'django.contrib.admin', 'd ...

  4. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  5. Struts2框架下的文件上传文件类型、名称约定

    Struts2框架下的文件上传机制:1.通过multipart/form-data form提交文件到服务器2.文件名是通过什么地方设置的?在strust2的FileUploadInterceptor ...

  6. Django文件上传下载与富文本编辑框

    django文件上传下载 上传 配置settings.py # 设定文件的访问路径,如:访问http://127.0.0.1:8000/media/就可以获取文件 MEDIA_URL = '/medi ...

  7. Python菜鸟之路:Django 文件上传的几种方式

    方式一:通过form表单中,html input 标签的“file”完成 # 前端代码uoload.html <form method="post" action=" ...

  8. Python Django文件上传

    文件保存本地 view视图 def update(request): if request.method =='GET': return render(request,'update.html') e ...

  9. python web框架——扩展Django&tornado

    一 Django自定义分页 目的:自定义分页功能,并把它写成模块(注意其中涉及到的python基础知识) models.py文件 # Create your models here. class Us ...

随机推荐

  1. Python 接口测试(五)

    五:使用python进行组织编写接口测试用例 接口测试其实就是几个步骤. 拿到接口的url地址 查看接口是用什么方式发送 添加请求头,请求体 发送查看返回结果,校验返回结果是否正确 明白了接口测试的测 ...

  2. java集合系列——List集合总结(六)

    一.总结概述 List继承了Collection,是有序的列表. 实现类有ArrayList.LinkedList.Vector.Stack等 ArrayList是基于数组实现的,是一个数组队列.可以 ...

  3. HDFS 分布式写入问题 AlreadyBeingCreatedException

    进行追加文件时出现AlreadyBeingCreatedException错误 堆栈信息大致如下: org.apache.hadoop.ipc.RemoteException(org.apache.h ...

  4. Linux crontab任务调度

    一.crontab说明 Linux crontab任务调度是在规定的时间频率内去执行相应的任务. 二.crontab文件详情 1.crontab文件在Linux中的/etc/crontab 2.查看c ...

  5. 2014 Benelux Algorithm Programming Contest (BAPC 14)E

    题目链接:https://vjudge.net/contest/187496#problem/E E Excellent Engineers You are working for an agency ...

  6. MYSQL解压版安装说明

    一. zip格式,解压缩之后要进行配置.解压之后可以将该文件夹改名,放到合适的位置,比如把文件夹改名为MySQL(文件夹 MySQL下面就是 bin, data,my-default.ini 等) 二 ...

  7. 利用百度地图WEB服务APIGeoCoding API批量地址解析

    Geocoding API包括地址解析和逆地址解析功能: 地理编码:即地址解析,由详细到街道的结构化地址得到百度经纬度信息,例如:“北京市海淀区中关村南大街27号”地址解析的结果是“lng:116.3 ...

  8. java web mysql 入门知识讲解

     MySQL学习笔记总结 一.SQL概述: SQL:Structured Query Language的缩写(结构化查询语言) SQL工业标准:由ANSI(ISO核心成员) 按照工业标准编写的SQ ...

  9. 浅谈Java抽象类

    什么是抽象类?这名字听着就挺抽象的,第一次听到这个名字还真有可能被唬住.但是,就像老人家所说的,一切反动派都是纸老虎,一切有着装x名字的概念也是纸老虎.好吧,我们已经从战略上做到了藐视它,现在就要战术 ...

  10. thrift例子:python客户端/java服务端

    java服务端的代码请看上文. 1.说明: 这两篇文章其实解决的问题是,当使用python去访问大数据线上集群的时候,遇到两个问题: 1)python-hadoop和python-hive相关包链接不 ...