取消图片上传按钮

Question

我创建了一个进度条来显示文件上传的进度。现在我正在尝试在进度条旁边创建一个 "cancel upload" 按钮。

进度条的代码 JQuery 是：

(function () {

                  var bar = $('.bar');
                  var percent = $('.percent');
                  var status = $('#status');
                  var percentVal = '0%';
                  var x = 1;
                  var y = null; // To keep under proper scope


                  $('form').ajaxForm({
                      beforeSend: function () {
                          status.empty();
                          percentVal = '0%';
                          bar.width(percentVal)
                          percent.html(percentVal);
                      },
                      uploadProgress: function (event, position, total, percentComplete) {

                          percentVal = percentComplete + '%';
                          if (percentVal != '100%')
                          {
                            bar.width(percentVal)
                            percent.html(percentVal);
                          }


                          //console.log(percentVal, position, total);
                      },
                      //success: function () {
                      //    var percentVal = '95%';
                      //    bar.width(percentVal)
                      //    percent.html(percentVal);
                      //},
                      complete: function () {

                          percentVal = '100%';
                          bar.width(percentVal)
                          percent.html(percentVal);
                          delay(500);

                          location.reload();
                      }
                  });

              })();

现在取消按钮输入标签：

 $(document).ready(function () {

        $('#cancel').click(function () {

            location.reload();

        });

    });

Jquery 插件：

   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="http://malsup.github.com/jquery.form.js"></script>

现在，如果我单击 'cancel' 按钮，图像仍会上传。有人可以帮我解决 'cancel' 按钮吗？谢谢

Answer 1

(function () {

              var bar = $('.bar');
              var percent = $('.percent');
              var status = $('#status');
              var percentVal = '0%';
              var x = 1;
              var y = null; // To keep under proper scope


              $('form').ajaxForm({
                  beforeSend: function () {
                      status.empty();
                      percentVal = '0%';
                      bar.width(percentVal)
                      percent.html(percentVal);
                  },
                  uploadProgress: function (event, position, total, percentComplete) {

                      percentVal = percentComplete + '%';
                      if (percentVal != '100%')
                      {
                        bar.width(percentVal)
                        percent.html(percentVal);
                      }


                      //console.log(percentVal, position, total);
                  },
                  //success: function () {
                  //    var percentVal = '95%';
                  //    bar.width(percentVal)
                  //    percent.html(percentVal);
                  //},
                  complete: function () {

                      percentVal = '100%';
                      bar.width(percentVal)
                      percent.html(percentVal);
                      delay(500);

                      location.reload();
                  }
                  $('#cancel').click(function () {

                    // Abort the data upload if it's running.
                    data.abort();

                    // Overwrite the plugin's default submit function.
                    data.submit = function () { return false; };

                   });
              });

          })();       

});

我想现在应该可以了。

PS：在Implementing Remove Buttons for jQuery-File-Upload

中找到了解决方案

您可能会发现它适合进一步阅读。

Answer 2

您可以在

表单的 HTML 中创建一个隐藏的输入框

<input id="textHiddenCancel" hidden type="text" value=""/>

修改取消输入按钮的onclick事件如下：

<input id="buttonCancel" type="button" value="Cancel Upload"
       onclick="textHiddenCancel.value = 'cancel';" />

在你的进度条循环中添加：

if ( textHiddenCancel.value == 'cancel' ) {
    // code to redirect to "you have cancelled" HTML page
    //   or to display a cancelled message on the form
    //   or whatever.
}

Answer 3

非常感谢您的帮助.. 在花了几分钟寻找解决方案后，我想出了这个解决方案.. 及其工作原理。

(function () {

                  var bar = $('.bar');
                  var percent = $('.percent');
                  var status = $('#status');
                  var percentVal = '0%';
                  var x = 1;
                  var y = null; // To keep under proper scope


                  $('form').ajaxForm({
                      beforeSend: function (xhr) {
                          status.empty();
                          $('#cancel').click(xhr.abort) // for cancel button
                          percentVal = '0%';
                          bar.width(percentVal)
                          percent.html(percentVal);

                      },
                      uploadProgress: function (event, position, total, percentComplete) {

                         percentVal = percentComplete + '%';

                            bar.width(percentVal)
                            percent.html(percentVal);

                            if (percentVal == '100%') {
                                $("#cancel").hide();

                            }

                      },
                      success: function (xhr) {
                          $("#cancel").hide();
                          $('#cancel').click(xhr.abort)

                      },
                      complete: function () {


                          location.reload();
                      }
                  });

              })();

取消图片上传按钮

cancel upload button for image upload

javascript

jquery

html

progress-bar