jQuery防止在提交時重新加載表格

Question

我想使用javascript / jquery / ajax上傳文件，在我的情況下，我必須防止重新加載表單並在上傳時提交。 另外，我想添加一個刪除按鈕，以便在上傳文件時，該刪除按鈕可以將其刪除，這與防止在提交表單時刷新頁面/重新加載頁面的情況相同。

因此，在單個表單中有三個按鈕UPLOAD ， DELETE ， NEXT ，在我的情況下，只有next按鈕允許通過刷新/動作來提交表單。 顯然，當僅選擇文件並且用戶直接單擊下一個按鈕時，它會先上傳然后采取行動。

HTML：

    <form name="myform" method="post" id="FORM2" enctype="multipart/form-data">
// OTHER VALUES OF FORM
                    <input type="file" name="FileUpload-1" id="FileUpload-1"  class="file_upload" />

                    <input type="submit" value="Upload" id="upload" class="submitUpload" />
                    <input type="submit" value="Delete" id="delete" class="submitDelete" />


<input type="submit" name="" id="FORMSUBMIT">
</form>

JS：

  $(".submitUpload").click(function(){ console.log('UPLOAD');
        action = "upload.php"; 
         $("#FORM").on('submit',function(){
          var options={
           url     : action,
           success : onsuccess
          };
        $(this).ajaxSubmit(options);
         return false;
         });
     }
     return false;

    });

     $(".submitDelete").click(function(){ console.log('DELETE');
        return false;
    });
 $('.FORMSUBMIT').click(function () {
         //CUSTOM HANDLING
      });

Answer 1

直接回答您的問題：

$("#FORM").on('submit',function(evt){
    evt.preventDefault();
});

這段代碼將阻止正常表單提交。 我的建議是將“更新”和“刪除”按鈕從type = submit轉換為type = button。 像這樣：

<input type="button" value="Delete" id="Delete" class="submitDelete" />

這將防止在按下刪除或更新時提交表單...

我為您寫了一個jsfiddle： https ://jsfiddle.net/yL35bh10/

Answer 2

我最近制作了一個頁面原型，需要上傳圖像文件。 我在GitHub上找到了一個易於使用的軟件包，該軟件包應提供您所需的大多數功能。 https://github.com/blueimp/jQuery-File-Upload

我唯一的問題是：文件上傳到服務器后，如何知道要刪除的內容？