Ajax上传文件
Posted Lift is short, You need Python
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax上传文件相关的知识，希望对你有一定的参考价值。
简单的小例子
在input框中输入数据，点击提交按钮。数据显示在iframe中，这里是通过form标签中的targets属性来绑定iframe标签
views.py
def test(request):
if request.method == 'GET':
return render(request,'test.html')
root = request.POST.get('root')
ret = {'status':True,'message':root}
return JsonResponse(ret)html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>基于iframe+Form表单提交数据</h3>
<iframe id="iframe" name="ifr"></iframe>
<form id="fm" action="/test/" method="post" target="ifr">
<input type="text" name="root">
<a onclick="AjaxSubmit()">提交</a>
</form>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit() {
document.getElementById('iframe').onload = reloadIframe // iframe的onload属性，在iframe内容加载时自动执行
document.getElementById('fm').submit();
}
function reloadIframe() {
var content = this.contentWindow.document.body.innerText // 获取到iframe内部的值，注意是一个页面，通过这种方式取值
var obj = JSON.parse(content)
if (obj.status){
alert(obj.message)
}
}
</script>
</html>1.用FormData封装表单数据，上传文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>上传文件</h3>
<input type="file" id="file">
<button onclick="AjaxSubmit()">提交</button>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit() {
var formdata = new FormData();
var file = document.getElementById('file').files[0]
formdata.append('file', file)
$.ajax({
url: '/test/',
method: 'POST',
data: formdata,
contentType: false,
processData: false,
success: function (data) {
console.log(data)
}
})
}
</script>
</html>2. 用iframe上传文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>基于iframe+Form表单上传文件</h3>
<iframe id="iframe" name="ifr" style="display: none;"></iframe>
<form id="fm" action="/test/" method="post" enctype="multipart/form-data" target="ifr">
<input type="file" name="file">
<a onclick="AjaxSubmit1()">提交</a>
</form>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit1() {
document.getElementById('iframe').onload = reloadIframe // iframe的onload属性，在iframe内容加载时自动执行
document.getElementById('fm').submit();
}
function reloadIframe() {
var content = this.contentWindow.document.body.innerText // 获取到iframe内部的值，注意是一个页面，通过这种方式取值
console.log(content)
}
</script>
</html>3. 预览图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<h3>基于iframe+Form表单上传文件</h3>
<iframe id="iframe" name="ifr" style="display: none;"></iframe>
<form id="fm" action="/upload_img.html/" method="post" enctype="multipart/form-data" target="ifr">
<input type="file" name="file" onchange="AjaxSubmit1()">
</form>
<h3>预览</h3>
<div id="preview">
</div>
</div>
</body>
<script src="/static/js/jquery-3.4.1.min.js"></script>
<script>
function AjaxSubmit1() {
document.getElementById('iframe').onload = reloadIframe
document.getElementById('fm').submit();
}
function reloadIframe() {
var content = this.contentWindow.document.body.innerText
var obj = JSON.parse(content)
var tag = document.createElement('img');
tag.src = obj.data;
$('#preview').empty().append(tag);
}
</script>
</html>def upload_img(request):
ret = {'status':True,'data':None,'message':None}
obj = request.FILES.get('file')
import uuid
nid = str(uuid.uuid4())
file_path = os.path.join('static', nid+obj.name)
f = open(file_path,'wb')
for line in obj.chunks():
f.write(line)
f.close()
ret['data'] = file_path
return HttpResponse(json.dumps(ret))以上是关于Ajax上传文件的主要内容，如果未能解决你的问题，请参考以下文章