一、正常版本的ajax上传
1.接收页面上的图片对象，要是用files/
通过id获取document.getElementById('img').files[0]
2.传递的时候，由于图片是对象，所以这里不能使用一般的字典保存，要创建new FormData()对象，通过append方法来保存
3.结尾的时候需要用设置两个值processData:false,contentType:false
function file() {
{#获取图片对象#}
var img = document.getElementById('img').files[0]
{#保存数据，可以保存对象#}
var data = new FormData()
{#添加数据#}
data.append("kv","va");
data.append("k1",img)
$.ajax({
url:'/index/',
type:'POST',
data:data,
success:function (arg) {
console.log(arg)
},
processData:false,
contentType:false
})
};
- html
<input type="file" id="img">
<a href="#" onclick="file()">上传</a>
二、源码的上传
1.接收页面上的图片对象，要是用files/
通过id获取document.getElementById('img').files[0]
2.传递的时候，由于图片是对象，所以这里不能使用一般的字典保存，要创建new FormData()对象，通过append方法来保存
3.少了第三步
function Ajax2() {
var img = document.getElementById('img').files[0]
{#保存数据，可以保存对象#}
var data = new FormData()
{#添加数据#}
data.append("kv","va")
data.append("k1",img)
//创建对象
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
//获取数据
xhr.open('POST','/ajax/');
xhr.send(data);
};
+html
<input type="file" id="img">
<a href="#" onclick="Ajax2()">上传</a>
三、iframe+form
整体的思路和上面的一样，给iframe 绑定事件，要注意form一定要附上
enctype="multipart/form-data"
function AjaxSubit(){
document.getElementById('ifram').onload = reloadIframe;
document.getElementById('fm').submit();
}
function reloadIframe() {
var concent = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(concent);
if(obj.status){
alert(obj.message)
}
}
- html
<iframe id="ifram" name="ifra"></iframe>
<form id="fm" action="/ajaxfram/" enctype="multipart/form-data" method="POST" target="ifra">
<input type="file" name="img">111
<a onclick="AjaxSubit()">提交</a>
</form>
四、图片实战
- html
这里注意 要隐藏iframe
<iframe id="iframe" name="iframe"></iframe>
<form id="fm1" enctype="multipart/form-data" method="post" action="/ajaxload/" target="iframe">
<input id="load" type="file" name="k3">
</form>
<div id="preview">
</div>
- js
注意几个问题，第一个问题是用change或者是onchange绑定input，需要改变input的类型，连接地址要加\.由于本身是分割符号，所以双\\
$(function () {
imgfile();
})
function imgfile() {
$('#load').change(function () {
document.getElementById('iframe').onload = reloadIframl
document.getElementById('fm1').submit()
})
}
function reloadIframl() {
var concent = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(concent);
if(obj.status){
var img = document.createElement('img')
img.src ="\\"+ obj.data
$('#preview').empty().append(img);
}
}
- 后台
要注意。文件的属性 都在request.FILES.get('k3')
def ajaxload(request):
if request.method == "GET":
return render(request,"img.html")
if request.method == "POST":
ret = {'status':True,'data':None,'message':None}
import os
import json
print(request.FILES)
obj =request.FILES.get('k3')
file_path = os.path.join('static', obj.name)
f = open(file_path,"wb")
for i in obj.chunks():
f.write(i)
f.close()
ret['data'] = file_path
return HttpResponse(json.dumps(ret))
image.png
