如果文件已經存在，jQuery攔截並阻止表單提交

我使用MVC3，並且我有一個帶有文件上傳的表單。如果該文件已經存在於服務器上，我想提示用戶確認他們要覆蓋該文件。我已經在表單提交上添加了一個jQuery方法來處理我在線閱讀的內容，但是似乎郵件在初始化之前可以顯示確認對話框。如果文件已經存在，jQuery攔截並阻止表單提交

如果我在頂部調用e.preventDefault()我的表單提交函數會停止表單，但是我不知道如何重新激活該操作。這裏是我有：

表單

@using (Html.BeginForm("Upload", "Management", FormMethod.Post, new {id = "formUpload", enctype = "multipart/form-data"})) { 

    <div class="editor-label">Pricing Model Workbook</div> 
    <div class="editor-field"> 
     <input type="file" name="file" id="file" size="50" /> 
     @Html.ValidationMessageFor(file => file.FileName) 
    </div> 
    <div><input type="submit" name="upload" id="upload" value="Upload" /></div> 
}

jQuery的

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $('#formUpload').submit(function (e) { 
      var filePath = $('#file').val(); 
      $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath }, 
       function (exists) { 
        if (exists) { 
         var cancel = confirm('File "' + filePath + '" has already been uploaded. Overwrite?'); 
         if (cancel) { 
          e.preventDefault(); 
          return false; 
         } 
        } 

        return true; 
       } 
      ); 
     }); 
    }); 
</script>

所以我的問題是，我究竟做錯了什麼？此外，作爲獎勵，如果客戶端驗證發現錯誤，是否有任何方法可以防止這種情況出現？

任何幫助將不勝感激！

UPDATE 我最終這樣做，這對我正在嘗試做的工作。

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     var fileInvalid = false; 

     // check if file exists when user selects a new file 
     $('#file').change(function() { 
      var filePath = $('#file').val(); 
      $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath }, 
       function (exists) { 
        if (exists) { 
         var overwrite = confirm('Warning :: File "' + filePath + '" has already been uploaded.' 
               + 'The existing data will be overwritten on submission. Continue?'); 
         if (!overwrite) { 
          $('#file').replaceWith($('#file').clone(true)); 
         } 
        } 
       } 
      ); 
     }); 
    }); 
</script>

來源

2011-09-07 shuniar

只是擡起頭來，你仍然有一個競爭條件。如果用戶在文件檢查返回之前提交表單，用戶將永遠看不到對話框。 – jmar777

的問題是，你的Ajax請求犯規可能完成，直到提交處理程序完成後，如果這篇文章繼續，你將失去取消它的能力。這聽起來像你需要的是一扇門;基本上，直到你設置標誌爲允許，你不能提交。像這樣的東西：

var fileInvalid = true; 
$('#file').change(function() 
{ 
    $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath }, 
      function (exists) { 
       if (exists) { 
        var cancel = confirm('File "' + filePath + '" has already been uploaded. Overwrite?'); 
        if (cancel) { 
         fileInvalid = false; 
        } 
       } 
       else 
       { 
        fileInvalid = false; 
       } 
      } 
     ); 
}); 

$('#formUpload').submit(function(e) 
{ 
    if(fileInvalid) 
     e.preventDefault(); 
});

來源

2011-09-07 18:05:41 Tejs

謝謝，我最終在我的解決方案中使用了這個概念，但採取了稍微不同的方法（請參閱我原來的問題中的更新）。標記爲答案。 – shuniar

我想你真正想要的是遠程驗證：

http://deanhume.com/Home/BlogPost/mvc-3-and-remote-validation/51

來源

2011-09-07 17:59:45

再次，我沒有解釋downvoted。要清楚：你可以很簡單地通過遠程驗證來做到這一點。 –

遠程驗證看起來很有趣，但我沒有看到允許覆蓋的方法，只是防止它們被覆蓋。我想顯示警告文件存在，並仍然讓他們上傳，如果他們選擇，因爲可能有更新的數據。我想我會在我的應用程序的其他地方使用它。 – shuniar

爲您的模型添加覆蓋布爾值，並將其作爲驗證字段。 –

這裏有一種方法。基本的想法是始終取消表單提交，除非已設置標誌。如果文件不存在，或者用戶確認提交，則將該標誌設置爲true，然後重新提交表單。

<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     var $form = $('#formUpload'); 
     $form.submit(function (e) { 
      // if user already confirmed, then let form submit 
      if ($form.data('confirmed')) { 
       return true; 
      } 
      // otherwise, prevent form submission so we can do file check 
      e.preventDefault(); 
      var filePath = $('#file').val(); 
      $.getJSON('@Url.Action("CheckIfFileExists")', { path: filePath }, 
       function (exists) { 
        if (exists) { 
         var cancel = confirm('File "' + filePath + '" has already been uploaded. Overwrite?'); 
         if (!cancel) { 
          // user wants to submit, so set flag and re-submit form 
          $form.data('confirmed', true).submit(); 
         } 
        } else { 
         // the file doesn't exist, so we can force submission w/out the dialog 
         $form.data('confirmed', true).submit(); 
        } 
       } 
      ); 
     }); 
    }); 
</script>

來源

2011-09-07 18:07:31 jmar777

如果文件已經存在，jQuery攔截並阻止表單提交

回答

相關問題