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>