一 通过form表单上传
import os def upload(request): if request.method == 'GET': #将图片显示到html页面 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) return redirect('/upload.html')
Html代码 <!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> {% for item in img_list %} <img style="height: 200px; 200px;" src="/{{ item.path }}" /> {% endfor %} </div> </body> </html>
二 通过ajax上传
a. 悄悄的上传
1、xmlHttpRequest
xml = new XMLHttpRequest();
xml.open('post', '/upload.html', true)
xml.send("k1=v1; k2=v2;")
2、jQuery
$.ajax({
url:
data: {'k1': 'v1', 'k2': 'v2'}
})
FormData对象
dict = new FormData()
dict.append('k1','v1');
dict.append('k2','v2');
dict.append('fafafa', 文件对象);
$.ajax({
url:
data: dict,
})
1、xmlHttpRequest上传
import os 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))
class Img(models.Model): path = models.CharField(max_length=120)
<input type="file" id="img" /> <input type="button" value="提交JQ" onclick="Uploadjq()" /> <script> 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; document.getElementById("imgs").appendChild(img); } } }; xml.send(dic); } </script>
2 Ajax上传
<input type="file" id="img" /> <input type="button" value="提交JQ" onclick="Uploadjq()" /> <script src="/static/jquery-2.1.4.min.js"></script> <script> 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 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); } } }) } </script>