方式一:通过form表单中,html input 标签的“file”完成

# 前端代码uoload.html
<form method="post" action="/upload/" enctype="multipart/form-data">
<input id="user" type="text" name="user" />
<input id='img' type="file" name="img" />
<input type="submit" />
</form>
# 后端代码
def upload(request):
if request.method == 'POST':
ret = {'status': False, 'data': None, 'error': None}
try:
user = request.POST.get('user')
img = request.FILES.get('img')
f = open(os.path.join('static', img.name), 'wb')
for chunk in img.chunks(chunk_size=1024):
f.write(chunk)
ret['status'] = True
ret['data'] = os.path.join('static', img.name)
except Exception as e:
ret['error'] = e
finally:
f.close()
return HttpResponse(json.dumps(ret))
return render(request, 'upload.html')

方法二:利用XmlHttpRequest对象,发送原生的Ajax请求

    (这种方法不能发送文件,需要依赖另外一个对象FormData)

 # 方法
a. void open(String method,String url,Boolen async)
用于创建请求 参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型) b. void send(String body)
用于发送请求 参数:
body: 要发送的数据(字符串类型) c. void setRequestHeader(String header,String value)
用于设置请求头 参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型) d. String getAllResponseHeaders()
获取所有响应头 返回值:
响应头数据(字符串类型) e. String getResponseHeader(String header)
获取响应头中指定header的值 参数:
header: 响应头的key(字符串类型) 返回值:
响应头中指定的header对应的值 f. void abort() 终止请求 # 属性
a. Number readyState
状态值(整数) 详细:
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据; b. Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数) c. String responseText
服务器返回的数据(字符串类型) d. XmlDocument responseXML
服务器返回的数据(Xml对象) e. Number states
状态码(整数),如:200、404... f. String statesText
状态文本(字符串),如:OK、NotFound...

XmlHttpRequest对象的主要属性和方法

<input type="button" value="XMLHttpRequest按钮" onclick="XHRAjax();">

<script>
function XHRAjax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () { # 回调函数--每当请求变化时,都会被触发,比如:创建、open、send、recv等。
if(xhr.readyState == 4){ # 仅当服务器数据全部返回时触发
var data = xhr.responseText;
console.log(data)
}
};
// GET请求
// xhr.open('GET', '/xhr_ajax?p=123');
// xhr.send();
// POST请求
xhr.open('POST', '/xhr_ajax/'); # 这里的URL必须加斜杠结尾。 发送post请求的时候必须携带请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8');
// 发送请求
xhr.send('n1=1;n2=2;');
};
</script>
def ajax(request):
import time
current_time = time.time()
return render(request, 'ajax.html', {'current_time': current_time})

  上述的内容,已经可以完成原生ajax的发送。 如果需要发送文件,则需要借助于FormData对象.下边介绍一下FormData的简单用法

# 前端代码

<input type="button" value="XMLHttpRequest-FormData按钮" onclick="XHRAjaxForm();">
# 后端代码: 基于FormData对象发送请求
function XHRAjaxForm() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
var data = xhr.responseText;
console.log(data)
}
};
xhr.open('POST', '/xhr_ajax/');
// 发送请求
var form = new FormData(); # 创建FormData对象
form.append('user', 'alex');
form.append('pwd', '123');
xhr.send(form);
};

  上面的例子,简单的介绍了FormData的用法 。下边的案例介绍如何使用formdate对象来上传文件

# 前端部分
<a onclick="uploadfile1();" style="cursor: pointer; display: inline-block;background-color: aqua">XMLHttpRequet上传</a> # JS部分
<script>
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>

方法三:利用JQuery Ajax + FormData进行文件上传

  Jquery转换为dom对象:$("#img")[0].files[0];   其中$("#img")是jquery对象, $("#img")[0]是dom对象

<a onclick="uploadFile2();" style="cursor: pointer; display: inline-block;background-color: aqua">JQuery-Ajax上传</a>

<script>

        function uploadFile2() {
var fileobj = $("#img")[0].files[0];
console.log(fileobj);
var form = new FormData();
form.append("img", fileobj);
form.append("uesr", 'alex');
$.ajax({
type: 'POST',
url: '/upload/',
data: form,
processData: false, # 告诉jquery要传输data对象
contentType: false, # 告诉jquery不需要增加请求头对于contentType的设置
success: function (arg) {
console.log(arg)
}
})
}
</script>

方法四:基于Iframe 实现伪Ajax 上传文件

<a onclick="uploadFile3();" style="cursor: pointer; display: inline-block;background-color: aqua">IFrame上传</a>

<script>
function uploadFile3() {
// target 是个name的属性值,而不是id
$("#container").find('img').remove();
document.getElementById("my_iframe").onload = callback;
document.getElementById('fo').target = 'my_iframe';
document.getElementById('fo').submit();
}
function callback() {
var t = $('#my_iframe').contents().find('body').text();
var json_data = JSON.parse(t);
console.log(json_data);
if(json_data.status){
// 上传成功
var tag = document.createElement('img');
tag.src = "/" + json_data.data;
tag.className = 'img';
$('#container').append(tag); }else{
// 上传失败
console.log(status.error);
} }
</script>

  不是所有的浏览器都可以兼容FormData对象。为了兼容性,引出iframe 的用法。

  iframe可以建立一个通道发送请求,利用iframe局部刷新的特性实现目标。

# 前端代码
<iframe name="my_iframe" style="display: none;" src=""></iframe>
# 这里使用的是name标签,和id标签无关 <a onclick="uploadFile3();" style="cursor: pointer; display: inline-block;background-color: aqua">IFrame上传</a> <div id="container"></div> <script>
function uploadFile3() {
// target 是个name的属性值,而不是id
$("#container").find('img').remove();
document.getElementById("my_iframe").onload = callback; # 通过js手动绑定一个事件
document.getElementById('fo').target = 'my_iframe'; # 这里target对应的是一个iframe 的name属性
document.getElementById('fo').submit();
}
function callback() {
var t = $('#my_iframe').contents().find('body').text();
var json_data = JSON.parse(t);
console.log(json_data);
if(json_data.status){  
// 上传成功
var tag = document.createElement('img');
tag.src = "/" + json_data.data;
tag.className = 'img';
$('#container').append(tag); }else{
// 上传失败
console.log(status.error);
} } </script>

  

  

  

Python菜鸟之路:Django 文件上传的几种方式的更多相关文章

  1. curl文件上传有两种方式,一种是post_fileds,一种是infile

    curl文件上传有两种方式,一种是POSTFIELDS,一种是INFILE,POSTFIELDS传递@实际地址,INFILE传递文件流句柄! );curl_setopt($ch, CURLOPT_PO ...

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

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

  3. Java文件上传的几种方式

    文件上传与文件上传一样重要.在Java中,要实现文件上传,可以有两种方式: 1.通过Servlet类上传 2.通过Struts框架实现上传 这两种方式的根本还是通过Servlet进行IO流的操作. 一 ...

  4. web 文件上传的几种方式

    问题 文件上传在WEB开发中应用很广泛. 文件上传是指将本地图片.视频.音频等文件上传到服务器上,可以供其他用户浏览或下载的过程. 以下总结了常见的文件(图片)上传的方式和要点处理. 表单上传 这是传 ...

  5. Servlet中文件上传的几种方式

    上传文件,因为上传的都是二进制数据,所以在Servlet中就不能直接用request.getParameter();方法进行数据的获取,需要借助第三方jar包对上传的二进制文件进行解析.常用的方式如下 ...

  6. ajax以及文件上传的几种方式

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

  7. 利用Selenium实现图片文件上传的两种方式介绍

    在实现UI自动化测试过程中,有一类需求是实现图片上传,这种需求根据开发的实现方式,UI的实现方式也会不同. 一.直接利用Selenium实现 这种方式是最简单的一种实现方式,但是依赖于开发的实现. 当 ...

  8. python文件上传的三种方式

    def upload(request): return render(request, 'upload.html') def upload_file(request): username = requ ...

  9. ASP.NET Core 1.0中实现文件上传的两种方式(提交表单和采用AJAX)

    Bipin Joshi (http://www.binaryintellect.net/articles/f1cee257-378a-42c1-9f2f-075a3aed1d98.aspx) Uplo ...

随机推荐

  1. Android错误之--activity_main cannot be resolved or is not a field

    一般在copy别人的项目中会easy出现本错误,截图例如以下:

  2. clone和lambda的一个小问题和解决

    起因是这样,某管理器类有两个集合,A集合是模板集合,B集合是从模板中实例出的集合. 但是B集合的一些东西,总会调用A集合中的,导致出错. 一开始考虑clone使用不当,但检查后没发现什么问题,后来发现 ...

  3. Sublime Text 2 和 Verilog HDL

    Sublime Text 2 和 Verilog HDL Date  Fri 04 July 2014 Tags Sublime Text / Vivado Sublime Text 代码编辑器之于程 ...

  4. HTTP 用户认证

    HTTP 常见的用户认证可以分为下面三种: 基于IP,子网的访问控制(ACL) 基本用户验证(Basic Authentication) 消息摘要式身份验证(Digest Authentication ...

  5. Highcharts 图表js框架

    纯js图表框架 ,图表传入Json数据 设置等等   , 如没特定要求可以考虑使用   优点 : 减轻服务器脚本运行负重  ,纯js执行,特效   缺点: 已知兼容性不高 帮助地址: http://w ...

  6. GraphicsMagick +im4java高并发处理大型网站图片工具-图片剪切、遮蔽、水印添加之环境搭建

    环境: centos 6.5 GraphicsMagick 下载安装 准备环镜: 需要依赖zlib图片操作函数库 下载地址:http://www.zlib.net/ 编译安装 .tar.gz cd z ...

  7. 修改net基本三层 动软生产

    控制层(dal) 模型层-实体类(Model) 显示层-web

  8. 使用BestSync同步软件与坚果云同步

    坚果云的免费用户可以享受每个月的1G上传与3G下载流量,同时号称是国内唯一支持WebDAV的云.我的工作备份的文档不多,正好手头有BestSync同步软件可以用.决定试试BestSync的与WebDA ...

  9. TortoiseGit上传项目代码到github方法(超简单)

    Github是咱广大开发者用的非常多的项目代码版本管理网站,项目托管可以是私人的(private)或者公开的(public),私人的收费,一个月7美金.咱这里就只说我们个人使用的,一般都是代码对外开放 ...

  10. MFC多国语言——资源DLL

    此随笔中主要内容来自http://blog.csdn.net/china_hxx/article/details/10066655,原出处不详. 以下内容基于VC 6.0.要实现界面多语言化,必须要先 ...