正文
Django上传文件和上传图片(不刷新页面)
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/upload.html" method="POST" enctype="multipart/form-data">
<input type="text" name="file_name">
<div style="position: relative">
<a>点击上传文件</a>
<input type="file" name="is_file" style="opacity: 0;position: absolute;top: 0;left: 0;">
</div>
<input type=submit name="OK">
</form>
</body>
</html>
from django.shortcuts import render,HttpResponse# Create your views here.def upload(request):
if request.method == "GET":
return render(request,"upload.html")
else:
#print(request.POST) #<QueryDict: {'file_name': ['12321321'], 'OK': ['提交']}>
#print(request.FILES) #<MultiValueDict: {'is_file': [<TemporaryUploadedFile: 说明书.pdf (application/pdf)>]}> filename = request.POST.get("file_name")
isfile = request.FILES.get("is_file") #isfile是对象(内容有文件大小,文件名称,文件内容等) print(isfile.name,isfile.size) #isfile.name文件名 #isfile.size文件大小,可以拿这值做限制 f = open('file/'+isfile.name,'wb')
for data in isfile.chunks():
f.write(data)
f.close()
return HttpResponse("ok")
2 通过ajax上传文件三种方式:
view代码三种方式都用这个代码
def file(request):
#print(request.FILES)
#print(request.POST)
isfile = request.FILES.get("isfile") # isfile是对象(内容有文件大小,文件名称,文件内容等) print(isfile) # isfile.name文件名 #isfile.size文件大小,可以拿这值做限制 f = open('static/' + isfile.name, 'wb')
for data in isfile.chunks():
f.write(data)
f.close()
return HttpResponse("OK")
-jQuery
html代码
<input type="file" id="pufile">
<a class="btn" onclick="AjaxSubmitFile()">上传</a>jQuery代码
function AjaxSubmitFile() {
var data = document.getElementById("pufile").files[0];//加上索引files[0]就是文件的内容,固定写法
var f = new FormData();
f.append('k1','k1'), //k1,k1是添加的一个数据到这个FromData里面去
f.append('k3','k3'),
f.append('isfile',data);
$.ajax({
url:"/file/",
type:"POST",
data:f,
success:function (arg) {
console.log(arg)
},
processData: false,//通过FormData处理数据 jQuery上传文件必须要加这个 tell jQuery not to process the data
contentType:false,//通过FormData处理数据 jQuery上传文件必须要加这个 tell jQuery not to set contentType
//以上表示jQuery data数据内容不需要做处理了,把FormData内容发过去给服务器就可以了
})
}
-原生
function AjaxSubmitFile1() {
var data = document.getElementById("pufile").files[0];//加上索引files[0]就是文件的内容,固定写法
var f = new FormData();
f.append('k1','k1');
f.append('k3','k3');
f.append('isfile',data);
var xhr = new XMLHttpRequest() ; <!-- #创建一个对象 -->
xhr.open('POST','/file/'); <!--#与那个url创建连接-->
xhr.onreadystatechange =function (){
if(xhr.readyState == 4){
// 4-完成，已经接收到全部响应数据；
console.log(xhr.responseText);
};
}; <!-- #onreadystatechange状态改变的时候执行function -->
xhr.send(f); <!-- #开始发送-->
}
默认情况下,jQuery 和 原生 以上两种是不支持上传文件的,但是可以利用FormData对象来封装用户提交的数据(FormData可以封装数据,也可以封装文件)
-ifrname+ Form
html代码
<iframe style="display: none" name="fileifrname"></iframe>
<form id="putifrname" action="/file/" method="post" target="fileifrname" enctype="multipart/form-data">
<input type="text" name="k1">
<input type="text" name="k2">
<input type="file" name="isfile">
<a onclick="putifrname()">上传</a>
</form>
function putifrname() {
document.getElementById("putifrname").submit();//点击putifrname标签,就开始提交
}
上传图片显示在页面,并且页面不自动刷新
Veiw代码:
def file(request):
print(request.FILES)
print(request.POST)
isfile = request.FILES.get("isfile") # isfile是对象(内容有文件大小,文件名称,文件内容等) print(isfile) # isfile.name文件名 #isfile.size文件大小,可以拿这值做限制 f = open('static/' + isfile.name, 'wb')
for data in isfile.chunks():
f.write(data)
f.close() import os,json
name = json.dumps(os.path.join("static",isfile.name))
print(name)
return HttpResponse(name)
Html代码:
<h1>Ifrname+Form上传</h1>
<iframe style="display: none" name="fileifrname" id="fileifrname"></iframe>
<form id="putifrname" action="/file/" method="post" target="fileifrname" enctype="multipart/form-data">
<input type="text">
<input type="file" name="isfile" onchange="putifrname()"> <!--//内容改变的时候;自动执行putifrname自动提交-->
</form><div id="png"></div><script>
function putifrname() {
document.getElementById('fileifrname').onload = test;
document.getElementById("putifrname").submit(); //提交的时候给上面ifrname标签加上 onload=test 让执行完后执行test函数
} function test() {
var data = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(data);
console.log(obj);
var tag = document.createElement('img');
tag.src = "http://127.0.0.1:8000/" + obj;
$("#png").empty().append(tag)
}</script>
