如何在下面取消此文件上传

How to cancel this file upload below

本文关键字：文件 取消 在下面      更新时间：2023-09-26

我有一个包含文件输入、上传按钮和取消按钮的表单：

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='stopImageUpload(this);' class='imageuploadform' >
<p class='imagef1_upload_form' align='center'><label>Image File: <input name='fileImage' type='file' class='fileImage' /></label>
<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>
</p>
<p class='imagef1_cancel' align='center'>
<label><input type='button' name='imageCancel' class='imageCancel' value='Cancel' /></label>
</p> 
<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe>
</form>

我已经设置了 php 来上传文件和所有这些，上传工作正常。由于下面的javascript函数，上传开始和停止，但我的问题是，如何对其进行编码，以便在用户开始上传（startImageUpload（）函数）时，如果用户希望在上传期间通过单击取消按钮取消上传，那么它会停止上传（我相信它需要导航到stopImageUpload（）函数，但我不确定这是否正确）。

我已经将所有内容设置为正确显示在屏幕上，我只需要知道能够成功取消上传的正确功能是什么，并显示消息"上传过程中出现错误"，该消息已经在stopImageUpload（）函数中。

以下是上传开始的函数：

function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_cancel').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;
      return true;
}

以下是上传完成的函数：

function stopImageUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
      }
      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
      return true;   
}

好的，所以你已经有了函数和点击处理程序，那么是什么阻止你在事件处理程序中调用你的函数呢？

假设 stopImageUpload 函数位于同一文件中（或至少加载在该页面上）：

$(".imagecancel").on("click", function(event) {
    console.log("clicked");
    event.preventDefault();
    stopImageUpload(); // Just call it?!
});

另外，请确保浏览器停止在您的 stopImageUpload 函数中发送其当前请求（上传）：

if(navigator.appName == "Microsoft Internet Explorer") {
    window.document.execCommand('Stop');
} else {
    window.stop();
}
相关文章：