方式一：通过form表单中，html input 标签的“file”完成
|
1
2
3
4
5
6
|
# 前端代码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>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
# 后端代码
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）
XmlHttpRequest对象的主要属性和方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<
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>
|
|
1
2
3
4
|
def
ajax(request):
import
time
current_time
=
time.time()
return
render(request,
'ajax.html'
, {
'current_time'
: current_time})
|
上述的内容，已经可以完成原生ajax的发送。 如果需要发送文件，则需要借助于FormData对象.下边介绍一下FormData的简单用法
|
1
2
3
|
# 前端代码
<
input
type
=
"button"
value
=
"XMLHttpRequest-FormData按钮"
onclick
=
"XHRAjaxForm();"
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
# 后端代码: 基于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对象来上传文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
# 前端部分
<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对象
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<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 上传文件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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局部刷新的特性实现目标。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
# 前端代码
<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>
|