利用ajax实现图片预览的步骤为：
程序实现的方法为：
方法一：
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="/static/js/jquery-1.12.4.js"></script>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpalod();" />
<input type="submit" onclick="iframeSubmit();" value="Form提交"/>
</form> <div id="preview"></div>
<script>
function iframeSubmit(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text); $('#preview').empty();
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data; //访问的路径
$('#preview').append(imgTag); })
} </script>
Views.py
def upload(request):
return render(request,'upload.html') def upload_file(request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa') import os
img_path = os.path.join('static/image/',fafafa.name) #存储的路径
with open(img_path,'wb') as f: #图片上传
for item in fafafa.chunks():
f.write(item) ret = {'code': True , 'data': img_path} #'data': img_path 数据为图片的路径，
import json
return HttpResponse(json.dumps(ret)) #将数据的路径发送到前端
前端的效果为：
之后，可以看到
看此时的后台数据
可以看到此时的这张图片已经被保存在一个名为image的文件夹中
方法二（直接将图片进行预览，无需提交）：
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="/static/js/jquery-1.12.4.js"></script>
<style>
.upload{
display: inline-block;padding: 10px;
background-color: brown;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 90;
}
.file{
width: 100px;height: 50px;opacity: 0;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
}
</style>
</head>
<body>
<form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">
<iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
<input type="file" name="fafafa" onchange="changeUpalod();" />
value="Form提交"/>#}
</form> <div id="preview"></div>
<script>
function changeUpalod(){
$('#ifm1').load(function(){
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text); $('#preview').empty(); //原来有就先清空一下
var imgTag = document.createElement('img');
imgTag.src = "/" + obj.data; //制作路径
$('#preview').append(imgTag); //添加路径
});
$('#form1').submit();
}
</script>
</body>
</html>
Views.py
def upload(request):
return render(request,'upload.html') def upload_file(request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa') import os
img_path = os.path.join('static/image/',fafafa.name) #存储的路径
with open(img_path,'wb') as f: #图片上传
for item in fafafa.chunks():
f.write(item) ret = {'code': True , 'data': img_path} #'data': img_path 数据为图片的路径，
import json
return HttpResponse(json.dumps(ret)) #将数据的路径发送到前端
前端的效果为：
选择文件后的效果为：
后台的效果为：
图片被成功存储在image文件中