# views.py文件 def register(request): back_dic = {'code': 100, 'msg': ''} form_obj = myforms.MyForm() if request.method == 'POST': # print("進入了POST!!") # 前端傳來了數據,如今要去校驗了 form_obj = myforms.MyForm(request.POST) # 自動校驗,校驗結果保存在 is_valid 中 if form_obj.is_valid(): data = form_obj.cleaned_data # 能夠看作,通過清洗的數據,鍵值形式存放,不知道是對象仍是字典類型 # print(type(data)) # 將confirm_password去掉 data.pop('confirm_password') # 獲取用戶上傳的文件對象,由於上面的data裏面是沒有的 # 上傳的頭像文件是放在request.FILES裏面 file_obj = request.FILES.get('myfile') # 判斷用戶是否上傳了本身的頭像,由於設置的是能夠不上傳頭像 # 若是不上傳頭像的話,會使用默認的頭像 if file_obj: # 上傳了頭像,那麼就將路徑添加到data中去 data['avatar'] = file_obj # 用create_user --> 密碼會保存成密文 models.UserInfo.objects.create_user(**data) back_dic['msg'] = '恭喜你,註冊成功!' back_dic['url'] = '/login/' else: back_dic['code'] = '101' back_dic['msg'] = form_obj.errors return JsonResponse(back_dic) return render(request, 'register.html', locals())
<!--register.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BBS論壇</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <h2 class="text-center"> 用戶註冊 </h2> {# 使用ajax向後端提交數據 #} <form id="myform"> {% csrf_token %} {% for form in form_obj %} <div class="form-group"> <label for="{{ form_obj.auto_id }}">{{ form.label }}</label> {{ form }} {# 下面用來顯示錯誤信息的 #} <span class="errors pull-right" style="color: red;"></span> </div> {% endfor %} </form> <div class="form-group"> <label for="id_myfile">頭像 <img src="/static/img/1.jpg" alt="" width="100" style="margin-left: 20px" id="id_img"> </label> <input type="file" name="myfile" id="id_myfile" style="display: none"> </div> <button class="btn btn-success btn-lg" id="id_submit">註冊</button> </div> </div> </div> <script> $('#id_myfile').change(function () { // 獲取用戶上傳的文件對象 let fileObj = this.files[0]; // 生成一個內置對象 let fileReader = new FileReader(); // 將文件對象傳遞給內置對象 fileReader.readAsDataURL(fileObj); // 將讀取出文件對象替換到img標籤 fileReader.onload = function(){ //等文件閱讀器讀取完畢再渲染圖片 $('#id_img').attr('src', fileReader.result) } }); // ajax提交數據 $('#id_submit').click(function(){ // 生成一個FormData對象 let formData = new FormData(); // 往FormData對象中添加鍵值 $.each($('#myform').serializeArray(), function (index, obj) { formData.append(obj.name, obj.value) }); // 手動添加文件數據 formData.append('myfile', $('#id_myfile')[0].files[0]); $.ajax({ url: '', type:'post', data: formData, //指定兩個參數 processData: false, contentType: false, success: function (data){ if (data.code === 100){ //跳轉到登陸界面 console.log("ok!"); location.href = data.url; }else{ $.each(data.msg, function (index, obj) { let targetId = '#id_' + index; // id_username, id_password... $(targetId).next().html(obj[0]).parent().addClass('has-error') }) } } }); }); $('input').focus(function () { $(this).next().html('').parent().removeClass('has-error') }) </script> </body> </html>