Question

我想使用javascript / jquery / ajax上传文件，在我的情况下，我必须阻止在上传表单提交时重新加载。另外，我想添加一个删除按钮，这样，当上传文件时，删除按钮可以删除这个，同样是场景，以防止页面刷新/重新加载表单提交。

因此，我在一个表单中有三个按钮，上传，删除，下一步，在我的情况下，只有下一个允许通过刷新/表单操作提交表单。显然，当刚刚选择文件并且用户直接点击下一个按钮时，它首先上传然后采取行动。

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

我唯一的问题是：一旦文件上传到服务器，你怎么知道删除什么？

jquery在提交时阻止重新加载表单

2 个答案: