前端上传图片的三种方法
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_exemptdef 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