Hoãn tập tin hình thức upload trình cho đến khi nó được xác nhận

Question

thể trùng lặp:
Pause form submission for validation

Đó là một sự tiếp nối của this đường bưu điện. Vì vậy, về cơ bản tôi đang tải lên một tệp trong iframe. Nhưng trước khi gửi, tôi lấy dữ liệu từ biểu mẫu và sử dụng hệ thống tích hợp của django kiểm tra tính hợp lệ của chúng (hiện tại nó chỉ là một hàm giả có foo: bar và trả về kết quả json = "true"). Tôi sử dụng hai nút - giả có thể nhìn thấy, mà các cuộc gọi xác nhận và thứ hai - ẩn, mà gửi biểu mẫu. Với mã bên dưới, tôi có thể thực hiện xác nhận, sau đó khi kết quả là biểu mẫu dương được gửi. Bây giờ nếu tôi hardcode mục tiêu cho hình thức, cảnh báo của tôi không được hiển thị và tôi khá chắc chắn rằng tải lên không được thực hiện (tiếc là danh sách tải lên được làm mới mỗi 8h vì vậy tôi sẽ biết nếu nó làm việc trong một thời gian). Nếu mục tiêu không được chỉ định, tệp được tải lên với chuyển hướng để toàn bộ trình xử lý sự kiện 'submit' bị bỏ qua. Hơn nữa, tho toàn bộ mã không hoạt động chút nào trong Chrome. Và nó giống như 2-3s (nhìn vào firebug) giữa nhận phản hồi từ xác nhận, và hiển thị nó mà tôi chưa từng thấy trước đây. Tôi thực sự tuyệt vọng khi làm cho nó hoạt động, vì tôi đã lãng phí 2 ngày và không có kết quả.

liên kết mẫu:

http://ntt.vipserv.org/artifact/

JS:

<script> 
    $('#fake_upload_submit').click(function(e){ 
     e.preventDefault(); 

     var fileUploadForm = document.getElementById('file_upload_form'); 
     fileUploadForm.addEventListener("submit", function() { 
      alert("sent in iframe"); 
      fileUploadForm.target = 'upload_target'; 
     }, false);  

     $.ajax({ 
      type: "POST", 
      url: '/artifact/upload/check-form/', 
      data: 'foo=bar', 
      dataType: "json", 
      success: function(data){ 
       if(data['result'] == "true"){ 
        $("#message").show(); 
        $("#message").fadeIn(400).html('<span>'+data["message"]+'</span>'); 
        setTimeout(function(){ 
         $("#message").fadeOut("slow", function() { 
          $("#message").hide(); 
         }); 
        }, 1500); 

        fileUploadForm.submit(); 

       } 
       else{ 
        $("#message").show(); 
        $("#message").fadeIn(400).html('<span">Response false</span>'); 
        setTimeout(function(){ 
         $("#message").fadeOut("slow", function() { 
          $("#message").hide(); 
         }); 
        }, 1500);      
        return false; 
       } 
      } 
     }); 
     return false;   
    }); 
</script> 

html:

<div id="message" style="background:black; width:400px; height:80px; display:none; color:white;"> 
</div> 
<h1>Submit</h1> 
<form action="{{upload_url}}" method="POST" target="" id="file_upload_form" enctype="multipart/form-data"> 
    {% render_upload_data upload_data %} 
    <table>{{ form }}</table>  
    <p> 
     <input type="hidden" maxlength="64" name="myfileid" value="{{ myfileid }}" > 
    </p> 
    <p> 
     <input type="submit" style="display:none" id="true_upload_submit" value="Submit" /> 
    </p>  
    <iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe> 
</form> 
    <p> 
     <input type="submit" id="fake_upload_submit" value="Submit" /> 
    </p> 

---

EDIT:

debugger của IE cho thấy Object doesn't support this property or method cho:

fileUploadForm.addEventListener("submit", function() { 
     alert("sent in iframe"); 
     fileUploadForm.target = 'upload_target'; 
    }, false); 

vì sử dụng addEventListener, nhưng không có lỗi hơn. Firebug sạch sẽ. Trong Chrome:

"Không thể tải tài nguyên" ở dạng séc. Điều này thật thú vị, vì kết quả tại .../check-form/is:

{ 
message: "Response = True" 
result: "true" 
} 

vì vậy có vẻ ổn với tôi. Đã thử cũng data.message thay vì dữ liệu ["message"] nhưng không có gì thay đổi.

Answer 1

Có thể một chút giải pháp khó chịu, nhưng đó là niềm vui khi làm việc với Javascript. Để giao tiếp giữa trình duyệt và máy chủ hoàn toàn lên tới Javascript và không phải với HTML. Có nghĩa là:

• Khi bạn viết HTML, hãy bỏ qua hành động; thay đổi các nút gửi cho các nút thông thường.
• Chạy xác thực qua ajax (như đã hoàn tất ngay bây giờ) và nếu xác thực thành công, hãy gọi hàm mới sẽ quản lý việc gửi biểu mẫu.
• chức năng hình thức-trình này sẽ hiển thị các thông điệp mà bạn muốn, và sau đó sẽ bổ sung thêm hành động để hình thành, và sẽ chạy form.submit();

Hope this helps

Answer 2

Look, bạn không có sử dụng fileUploadForm.addEventListener("submit", function(){...}, false). Đây là chính xác là những gì $(fileUploadForm).submit(function(){...}) làm và có lợi thế là hoạt động trên tất cả các trình duyệt.