jQuery防止在提交时重新加载表格

Question

I want to upload files using javascript/jquery/ajax and in my case, I have to prevent the reload on form submitting on upload. Also, I want to add a delete button, such that, when file is uploaded, the delete button can delete this and same is the scenario, that to prevent the page refresh/reload on form submitting.

Hence, I've three buttons in a single form, UPLOAD , DELETE , NEXT and in my case, only next allows to submit the form by refreshing/action of form. And obviously, when file is just selected and the user directly hits the next button, it first uploads and then take his action.

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

To Directly answer your question:

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

This piece of code will prevent the normal form submitting. My advice is to transform the Update and Delete buttons from type=submit to type=button. Like this:

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

This will prevent the form to be submitted when delete or update are pressed...

I wrote a jsfiddle for you: https://jsfiddle.net/yL35bh10/

Answer 2

I recently prototyped a page needing image file upload. I found a package on GitHub that was easy to use and should provide the majority of the functionality you're needing. https://github.com/blueimp/jQuery-File-Upload

My only question to you: Once a file is uploaded to the server, how are you going to know what to delete?