Maison > Article > développement back-end > Projet Django téléchargement et accès pratiques à l'avatar de l'utilisateur
Projet Django téléchargement et accès pratiques à l'avatar de l'utilisateur
- 不言original
- 2018-04-21 14:49:062178parcourir
Cet article présente principalement les exemples pratiques de téléchargement et d'accès aux avatars des utilisateurs dans les projets Django. Maintenant, je les partage avec vous et leur donne une référence. Jetons un coup d'oeil ensemble
1 Enregistrez le fichier localement sur le serveur
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p>用户名:<input type="text" name="username"></p>
<p>头像<input type="file" name="avatar"></p>
<input type="submit" value="提交">
</form>
</body>
</html>
urls.py
from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^upload',views.upload) ]
views.py
from django.shortcuts import render,HttpResponse
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
with open(avatar.name,'wb') as f:
for line in avatar:
f.write(line)
return HttpResponse('ok')
return render(request,'upload.html')
Résumé
De cette façon, nous avons réalisé un petit exemple basique de téléchargement de fichiers. Il y a quelques points à noter ici :
1. La vérification csrf_token doit être ajoutée au formulaire
2. La valeur de type de la zone de saisie du fichier est file
3. Pour obtenir le fichier dans la fonction d'affichage, utilisez la requête.FILES Méthode .get()
4. Le nom du fichier peut être obtenu via obj.name
2 Téléchargez le fichier dans la base de données
models.py
from django.db import models class User(models.Model): username = models.CharField(max_length=16) avatar = models.FileField(upload_to='avatar')
views.py
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
models.User.objects.create(username=name,avatar=avatar)
return HttpResponse('ok')
return render(request,'upload.html')
Résumé
La fonction de téléchargement de fichiers dans la base de données a été implémentée ci-dessus. Il y a quelques points à noter :
1. Le. ce qu'on appelle le téléchargement vers la base de données ne signifie pas placer l'image elle-même ou le code binaire dans la base de données. En fait, le fichier est téléchargé sur le serveur localement. La base de données stocke uniquement le chemin d'un fichier, de sorte que lorsque l'utilisateur le souhaite. pour appeler le fichier, il peut se rendre à l'emplacement spécifié par le serveur via le chemin.
2. Lors de la création d'un ORM, le champ avatar doit être Il y a un attribut upload_to='', qui précise où mettre le fichier téléchargé. file
3. Lors de l'ajout à la base de données, l'attribution de l'attribut du champ de fichier est de la même forme que le champ ordinaire, tel que : models.User.objects create(username=name,avatar=avatar)
4. . Si les noms de fichiers téléchargés par deux utilisateurs sont identiques, le système renommera automatiquement le fichier. L'effet est le suivant :
Supplémentaire<. la fonction>
MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") #blog是项目名，media是约定成俗的文件夹名 MEDIA_URL="/media/" # 跟STATIC_URL类似，指定用户可以通过这个路径找到文件2. Configurer dans urls.py
from django.views.static import serve
from upload import settings #upload是站点名
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),Après la configuration , vous pouvez accéder à l'image via http://127.0.0.1:8001/media/milk.png 3 Utilisez AJAX pour soumettre des fichiers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
{% csrf_token %}
<p>用户名:<input id="name-input" type="text"></p>
<p>头像<input id="avatar-input" type="file"></p>
<input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
$('#submit-btn').on('click',function () {
formdata = new FormData();
formdata.append('username',$('#name-input').val());
formdata.append("avatar",$("#avatar")[0].files[0]);
formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
$.ajax({
processData:false,contentType:false,url:'/upload', type:'post', data:formdata,success:function (arg)
{
if (arg.state == 1){ alert('成功！') }
else { alert('失败！') } } }) });
</script>
</body>
</html>views.pyfrom django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from app01 import models
def upload(request):
if request.method == 'POST':
name = request.POST.get('username')
avatar = request.FILES.get('avatar')
try:
models.User.objects.create(username=name,avatar=avatar)
data = {'state':1}
except:
data = {'state':0}
return JsonResponse(data)
return render(request,'upload.html') Résumé2 Lorsque Ajax télécharge, la valeur du paramètre data n'est plus un dictionnaire ordinaire. ' tapez la valeur, mais un objet FormData
- Créez un objet formdata = new FormData();
- Ajoutez-y une valeur formdata. username',$('#name-input').val());
- formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
- 4. , il doit y avoir deux réglages de paramètres
- processData:false
- contentType:false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<!----用一个label标签将上传文件输入框跟图片绑定一起，
点击图片的时候就相当于点击了上传文件的按钮---->
<label><img id="avatar-img" src="/static/img/default.png" width="80px" height="80px">
<p>头像<input id="avatar-input" hidden type="file"></p>
</label>
<input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
// 上传文件按钮（label里的图片）点击事件
$('#avatar-input').on('change',function () {
// 获取用户最后一次选择的图片
var choose_file=$(this)[0].files[0];
// 创建一个新的FileReader对象，用来读取文件信息
var reader=new FileReader();
// 读取用户上传的图片的路径
reader.readAsDataURL(choose_file);
// 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径
reader.onload=function () {
$("#avatar-img").attr("src",reader.result)
}
});
</script>5 Résumé
Pour le téléchargement de fichiers, qu'il s'agisse d'une soumission directe par formulaire ou d'une soumission Ajax, le problème fondamental est d'indiquer au navigateur que ce que vous souhaitez télécharger est un fichier et non une chaîne ordinaire
Comment le savoir au navigateur est de demander le paramètre ContentType du poids Nous n'avons pas besoin de le spécifier lors du téléchargement d'une chaîne normale, car il a une valeur par défaut,
Si vous le souhaitez. transférer des fichiers, vous devez le spécifier séparément. Pour résumer les points suivants
2. Pour le téléchargement ajax, ContentType est spécifié via processData:false et contentType:false
3. Lorsque le formulaire est téléchargé, les données du fichier sont "encapsulées" via la balise 3525558f8f338d4ea90ebf22e5cde2bc
4. Lorsque l'ajax est téléchargé, les données sont ajoutées via un objet d'instance FormData. Transmettez simplement cet objet lors de sa transmission
5. Une fois les données transmises, elles sont encapsulées dans request.FILES au lieu de request.POST
Recommandations associées :
Comment Django charge les fichiers CSS et js et les images statiques
Explication détaillée de l'utilisation des contrôles Django et de la transmission des paramètres
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!