前端上传图片的三种方法
Django框架下，在前端上传文件，保存在数据库，并在前端不刷新页面显示上传图片。
- 利用XMLHttpRequest 对象和FormData对象上传文件
- Ajax上传文件
- 基于form表单和iframe自己实现ajax请求
1、首先创建数据库表
class Img(models.Model):
path = models.CharField(max_length=128)
更新数据库
>python manage.py makemigrations >python manage.py migrate
2、在Django后台views中定义函数
#前端上传文件，保存在数据库，并在前端不刷新页面显示上传图片
import os,json
@csrf_exempt
def upload(request):
if request.method == ‘GET‘:
img_list = models.Img.objects.all()
return render(request,‘upload.html‘,{‘img_list‘: img_list})
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()
models.Img.objects.create(path=file_path)
ret = {‘status‘: True, ‘path‘: file_path}
return HttpResponse(json.dumps(ret))
3、添加urls路径
url(r‘^upload.html$‘, views.upload),
4、前端文件上传的三种方法
第一种、XML的方式上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container img{
width: 200px;
height:200px;
}
</style>
</head>
<body>
<h1>图片列表</h1>
<div class="container" id="imgs">
{% for img in img_list %}
<img src="/{{ img.path }}"/>
{% endfor %}
</div>
<input type="file" id="img">
<input type="button" value="提交XML" onclick="UploadXML()"/>
<input type="button" value="提交JQ" onclick="Uploadjq()"/>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
//XML的方式上传文件，并在页面不刷新显示图片
function UploadXML(){
var dic = new FormData();
dic.append(‘user‘, ‘v1‘);
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);
if (obj.status){
var img = document.createElement(‘img‘);
img.src = "/" + obj.path;
$(‘#imgs‘).append(img);
}
}
};
xml.send(dic);
}
</script>
</body>
</html>
第二种、ajax方式上传文件，并异步显示
<input type="file" id="img">
<input type="button" value="提交XML" onclick="UploadXML()"/>
<input type="button" value="提交JQ" onclick="Uploadjq()"/>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
//ajax方式上传文件，并异步显示
function Uploadjq(){
var dic = new FormData();
dic.append(‘user‘, ‘v1‘);
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 默认情况下jquary会对数据做处理
contentType:false, // tell jQuery not to set contentType
dataType:‘JSON‘,
success: function (arg) {
if (arg.status){
var img = document.createElement(‘img‘);
img.src = "/" + arg.path;
$(‘#imgs‘).append(img);
}
}
})
}
第三种、基于form表单和iframe自己实现ajax请求
<!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功能</h1>
<input type="text" id="url"/>
<input type="button" value="点我" onclick="iframChange()">
<iframe id="ifr" src=""></iframe>
<hr/>
<h1>基于ifram实现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"/>
<input type="file" name="fafafa"/>
<input type="submit" value="确定"/>
</form>
<h1>图片列表</h1>
<div class="container" id="imgs">
{% for img in img_list %}
<img src="/{{ img.path }}"/>
{% endfor %}
</div>
<script src="/static/jquery-2.1.4.min.js"></script>
<script>
//测试
function iframChange(){
var url = $(‘#url‘).val();
$(‘#ifr‘).attr(‘src‘,url);
}
//基于form表单和iframe自己实现ajax请求
function loadIframe(){
console.log(2);
// 获取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>
原文地址：https://www.cnblogs.com/11wayne/p/9242770.html
时间： 2024-10-26 09:52:42