Django bootstrap模式文件上傳表格

Question

今天，我在互聯網上花了大約3個小時，尋找解決方案，但沒有運氣。我想引導模態（彈出），並在該模式我有窗體，選擇一個1-6之間的數字和上傳圖片文件。到目前爲止，我有以下文件： Views.py：

SUJECTS = ["subject1", "subject3", "subject55",] 
@login_required 
def create_exam(request, letnik_id, classes_id, subject_id): 
    response_data = {} 
    if subject_id in SUBJECTS: 
     path = letnik_id + '/' + classes_id + '/' + subject_id 
     form = ExamForm(request.POST or None, request.FILES or None) 
     if form.is_valid(): 
      exam = form.save(commit=False) 
      exam.exam_user = request.user 
      exam.exam_path = path 
      exam.exam_file = request.FILES['exam_file'] 
      file_type = exam.exam_file.url.split('.')[-1] 
      file_type = file_type.lower() 
      if file_type not in IMAGE_FILE_TYPES: 
       context = { 
       'error_message': 'File must be PNG, JPG ali JPEG', 
       } 
       return ?? 
      if Exam.objects.filter(exam_path=path, exam_number=exam.exam_number): 
       context = { 
       'form': form, 
       'error_message': 'Exam already exists!', 
       } 
       ??return?? 
      exam.save() 
      return redirect('subject_id', letnik_id=letnik_id, classes_id=classes_id, subject_id=subject_id) 
     context = { 
     "form": form 
     } 
     return render(request, 'exam_form.html', context) 
    raise Http404("Site does not exist")` 

和我有exam_form.html：包含在tests.html（我只是在按鍵過去了，因爲

<!-- Modal --> 
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <!-- Modal Header --> 
      <div class="modal-header"> 
       <button type="button" class="close" 
        data-dismiss="modal"> 
         <span aria-hidden="true">&times;</span> 
         <span class="sr-only">Close</span> 
       </button> 
       <h4 class="modal-title" id="myModalLabel"> 
        Dodaj Test 
       </h4> 
      </div> 

      <!-- Modal Body --> 
      <div class="modal-body"> 
      {% if error_messages %} 
         <p style="color: #cc0000;" id="error_message">{{ error_message }}</p> 
        {% endif %} 

       <form id="form" class="form-horizontal" role="form" method="post" enctype="multipart/form-data" action="{% url 'create_exam' letnik_id=letnik_id classes_id=classes_id subject_id=subject_id %}" id="post-form"> 
       {% csrf_token %} 
        <div class="form-group"> 
        <label class="col-sm-2 control-label" 
           for="inputEmail3">Number</label> 
        <div class="col-sm-10"> 
         <select class="form-control" id="" name="exam_number"> 
          <option>1</option> 
          <option>2</option> 
          <option>3</option> 
          <option>4</option> 
          <option>5</option> 
          <option>6</option> 
         </select> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="col-xs-2 control-label" 
          for="inputPassword3" >Picture</label> 
        <div class="col-sm-10"> 
         <input name="exam_file" type="file" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <div class="col-sm-offset-2 col-sm-10"> 
        </div> 
        </div> 






      </div> 

      <!-- Modal Footer --> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal"> 
          CLose 
       </button> 
       <button type="submit" class="btn btn-primary"> 
        Submit 
       </button> 
      </div> 
      </form> 
     </div> 
    </div> 
</div> 

的test.html的犯規不了了之：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal" href=""> 
    Add Exam 
</button> 
{% include 'exam_form.html' %} 

我views.py：

url(r'^(?P<letnik_id>[1-4])/(?P<classes_id>[A-G])/(?P<subject_id>[\w\-]+)/dodaj$', views.create_exam, name="create_exam"), 

所以我想添加bootstrap模態。當我點擊提交時，就會創建考試。但是，如果我犯了一個錯誤，如果考試已經存在或文件不是PNG/JPG/JPEG格式，它會給我一個錯誤，因爲我不知道如何配置模式來顯示錯誤，而不是關閉，如果有任何錯誤。我見過一些使用AJAX，但我不知道如何實現。我很喜歡它，如果有可能從視圖傳遞錯誤，而不需要重新加載頁面，因爲當頁面重新加載時，模式關閉。

Answer 1

捕捉submit在JavaScript

$('#form').on('submit', function(e) { 
    e.preventDefault(); 
    $.ajax({ 
     url : "/url/", 
     type: "POST", 
     data: $(this).serialize(), 
     success: function (data) { 
      //here data is the response. Based on this data, do your logic; 
     }, 
     error: function (jXHR, textStatus, errorThrown) { 
      alert("error"); 
     } 
    }); 
}); 

Answer 2

我通過兩個途徑（通過Ajax和通過行動）嘗試，但問題是一樣的，只是刪除數據，駁回=「模態」會運行，

<div class="modal-footer"> 
       <button type="button" class="btn btn-default">CLose</button>