需求
上传图片在页面显示
Form表单上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="POST" action="/upload.html" enctype="multipart/form-data">
<input type="text" name="user" />
<input type="file" name="fafafa" />
<input type="submit" value="提交" />
</form>
<div>
{% if img %}
<img style="height: 200px;width: 200px;" src="/{{ img }}" />
{% endif %}
</div>
<script src="/static/jquery-2.1.4.min.js"></script>
</body>
</html>
//后台代码
from django.shortcuts import render
import os
def upload(request):
if request.method == \'GET\':
return render(request,\'upload.html\')
elif request.method == "POST":
user = request.POST.get(\'user\')
fafafa = request.POST.get(\'fafafa\')
obj = request.FILES.get(\'fafafa\')
file_path = os.path.join(\'static\',\'upload\',obj.name)
f = open(file_path, \'wb\')
for chunk in obj.chunks():
f.write(chunk)
f.close()
ret = {\'status\': True, \'path\': file_path}
return render(request,"upload.html",{\'img\':file_path})缺点：上传后整个页面会刷新，不好
Ajax上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input ID="v1" name="user" placeholder="用户">
<input type="file" name="fafafa" id="img" />
<input type="button" value="提交XML" onclick="UploadXML()" />
<input type="button" value="提交JQ" onclick="Uploadjq()" />
<div id="imgs">
</div>
</body>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
function UploadXML() {
var dic = new FormData();
dic.append(\'user\', $(\'#v1\').val());
dic.append(\'fafafa\', document.getElementById(\'img\').files[0]);
var xml = new XMLHttpRequest();
xml.open(\'post\', \'/upload.html\', true);
xml.onreadystatechange = function () {
if(xml.readyState == 4){
var obj = JSON.parse(xml.responseText);
console.log(obj)
if(obj.status){
var img = document.createElement(\'img\');
img.src = "/" + obj.path;
document.getElementById("imgs").appendChild(img);
}
}
};
xml.send(dic);
}
function Uploadjq() {
var dic = new FormData();
dic.append(\'user\', $(\'#v1\').val());
dic.append(\'fafafa\', document.getElementById(\'img\').files[0]);
$.ajax({
url: \'/upload.html\',
type: \'POST\',
data: dic,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
dataType: \'JSON\',
success: function (arg) {
if (arg.status){
console.log("111")
var img = document.createElement(\'img\');
img.src = "/" + arg.path;
$(\'#imgs\').append(img);
}
}
})
}
</script>
</body>
</html>
/////后台代码
from app01 import models
import json
from django.shortcuts import render,HttpResponse
import os,json
def upload(request):
if request.method == \'GET\':
return render(request,\'upload.html\')
elif request.method == "POST":
user = request.POST.get(\'user\')
print(user)
fafafa = request.POST.get(\'fafafa\')
obj = request.FILES.get(\'fafafa\')
file_path = os.path.join(\'static\',\'upload\',obj.name)
f = open(file_path, \'wb\')
for chunk in obj.chunks():
f.write(chunk)
f.close()
ret = {\'status\': True, \'path\': file_path}
return HttpResponse(json.dumps(ret))实现了异步刷新，但是部分老版本的浏览器不支持FormData对象
基于iframe实现form提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h1>基于iframe实现form提交</h1>
<form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
<iframe style="display: none" id="iframe_1" name="iframe_1" src="" onload="loadIframe();"></iframe>
<input type="text" name="user" /><br>
<input type="file" name="fafafa" />
<input type="submit" value="提交" />
</form>
<div id="imgs">
</div>
</body>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
function loadIframe() {
console.log(1);
// 获取iframe内部的内容
var str_json = $(\'#iframe_1\').contents().find(\'body\').text();
var obj = JSON.parse(str_json);
if (obj.status){
var img = document.createElement(\'img\');
img.src = "/" + obj.path;
$(\'#imgs\').append(img);
}
}
</script>
</body>
</html>
///后台代码
from django.shortcuts import render,HttpResponse
import os,json
def upload(request):
if request.method == \'GET\':
return render(request,\'upload.html\')
elif request.method == "POST":
user = request.POST.get(\'user\')
print(user)
fafafa = request.POST.get(\'fafafa\')
obj = request.FILES.get(\'fafafa\')
file_path = os.path.join(\'static\',\'upload\',obj.name)
f = open(file_path, \'wb\')
for chunk in obj.chunks():
f.write(chunk)
f.close()
ret = {\'status\': True, \'path\': file_path}
return HttpResponse(json.dumps(ret))
效果