博客系统之注册（头像上传）

注册时预览头像，头像会变化

1 // 预览头像
2     $('#avatar').change(function() {
3         var choose_file = $(this)[0].files[0];
4         var reader = new FileReader();
5         reader.readAsDataURL(choose_file);
6         reader.onload = function(){
7             $('#avatar_img').attr({'src': this.result})
8         }
9     });
jQuery预览头像

当input框的值改变了触发时间吧img改变img路径，在JavaScript中有FileReader()方法，实例化一个对象使用相应的方法得到URL，没有返回值，其结果在this中用this.result()

 

当我们在form表单中上传一个文件是需要修改form表单的一个属性

1   obj=request.FILES.get("f")
2   <form action="" method="post" enctype="multipart/form-data">

如果使用ajax上传：

 1 $('input[type=file]').change(function(){
 2     // 创建一个Formdata对象
 3     var formdata = new Formdata();
 4     formdata.append('key', 'value');
 5     formdata.append('filename',$('input[type=file]')[0].files[0]);
 6     $.ajax({
 7         url: '',
 8         type: 'post',
 9         data:formdata,
10        success:function(){
11            ......    
12       }
13     })    
14 })
ajax实现文件上传基于jQuery

 contentType：false

 processData：false

 1 def register(request):
 2     # 判断是否是ajax请求
 3     if request.is_ajax():
 4         # 实例化一个用户提交的form表单对象
 5         form_obj = forms.RegisterForm(request.POST)
 6         data = {'user': None, 'error_msg': ''}
 7         if form_obj.is_valid():
 8             user = form_obj.cleaned_data.get('user')
 9             pwd = form_obj.cleaned_data.get('pwd')
10             email = form_obj.cleaned_data.get('email')
11             avatar = request.FILES.get('avatar')
12             new_user = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar)
13             data['user'] = new_user.username
14         else:
15             data['error_msg'] = form_obj.errors
16         return HttpResponse(json.dumps(data))
17     form_obj = forms.RegisterForm()
18     return render(request, 'register.html', {'form_obj': form_obj})
注册把头像信息下载到服务器

头像默认下载到项目的根目录下，保存的文件夹根据ORM创建的字段信息

 

在settings文件中可以配置保存路径 1 media配置：

 2          
 3         静态文件：  static
 4                               css
 5                               js                          
 6                               img
 7                               font
 8                               
 9         用户上传文件    media
10                             avatar/
11                             ...../                        
12                           
13         针对FileField，Imagefield字段：
14         
15         avatar = models.FileField(upload_to = 'avatars/',default="/avatar/default.png")
16         
17         默认会将FileField字段中的upload_to参数对应的值avatars文件下载到项目的根目录下
18         
19         if 在settings配置了一句：
20                MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media")
21                将FileField字段中的upload_to参数对应的值avatars下载MEDIA_ROOT路径下
22                           
23                           
24         #################################
25 
26 
27         使用media
28             settings.py:
29                 MEDIA_URL="/media/"
30         
31             urls.py:
32             
33                 from s8_cnblog import settings
                   from django.views.static import serve
34                 url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), 35

 

posted @ 2018-02-07 11:31  沈俊杰  阅读(143)  评论(0)    收藏  举报