Django只在客户端提交表单时多次执行视图函数

Question

我需要上传用户的图像到服务器django（1.8）处理它。 我肯定客户只提交一次表格。但是，后端执行了很多次相关的查看功能，当我提交了一个小的大图片（大约2米）时返回504。你知道吗

这是我的html： 你知道吗

 <form action="/test/" method="POST" id="upload_form" enctype="multipart/form-data">
      {% csrf_token %}
      <a href="javascript:void(0);" class="addPic">
      <input id="choose_btn" class="btn" name="user_image"  type="file"></a>
 </form>
 <button type="button" id="upload_btn" class="btn btn-danger " data-loading-text="uploading..." autocomplete="off"> Upload!</button>

这是我的js（确保只有一个提交，灵感来自https://stackoverflow.com/a/4473801/1902843）： 你知道吗

$('#upload_btn').click( function () {
        var $btn = $(this).button('loading');
        $('#upload_form').submit(function(e){
            console.log("start submit");
            var $form = $(this);
            if ($form.data('submitted') === true) {
                // Previously submitted - don't submit again
                console.log("has submitted!");
                e.preventDefault();
            } else {
                console.log("first submitted");
                // Mark it so that the next submit can be ignored
                $form.data('submitted', true);
            }
        });
        $('#upload_form').submit();
    });

我的后端视图功能是：

型号 你知道吗

class UserImage(models.Model):
    image = models.ImageField(upload_to='./user_image/%Y%m/%d', storage=ImageStorage(), blank=False)
    detect_result = models.TextField(max_length=1000, blank=True)

查看 你知道吗

@csrf_exempt
def test(request):
    # if use form's is_valid() function, it always return false. 
    # very weird, thus i annotate it
    # if request.method == 'POST':
    #     form = UploadFileForm(request.POST, request.FILES)
    #     if form.is_valid():
    user_image = request.FILES['user_image']
    im = UserImage(image=user_image)
    im.save() #after looking for log, it saved many times depending on image size?
    img_path = settings.MEDIA_URL + str(im.image)
    ...
    processing image
    ...

    return render_to_response('open.html', result_data)

Answer 1

我个人会在表单中放置提交按钮。你知道吗

<form action="/test/" method="POST" id="upload_form" enctype="multipart/form-data">
    {% csrf_token %}
    <a href="javascript:void(0);" class="addPic">
    <input id="choose_btn" class="btn" name="user_image"  type="file"></a>
    <button type="button" id="upload_btn" class="btn btn-danger " data-loading-text="uploading..." autocomplete="off"> Upload!</button>
</form>

然后使用“上传”btn上的事件侦听器，而不是触发单击。另外，只调用$('#upload_form').submit()一次

$('#upload_btn').on('click', function (e) {  // Attach a click event listener
    // Check the form, display loading icon, etc
    // and when ready to submit the form ...
    $('#upload_form').submit();
});