如何使用按钮运行以下函数 jquery？

Question

事实是，jquery 很少，我有以下 django 的 jquery 代码，它的作用是这样的。

选择文件：

<input id="chunked_upload" type="file" name="the_file">

自动执行以下jquery代码

<script type="text/javascript">
var md5 = "",
    csrf = $("input[name='csrfmiddlewaretoken']")[0].value,
    form_data = [{"name": "csrfmiddlewaretoken", "value": csrf}];
function calculate_md5(file, chunk_size) {
  var slice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
      chunks = chunks = Math.ceil(file.size / chunk_size),
      current_chunk = 0,
      spark = new SparkMD5.ArrayBuffer();
  function onload(e) {
    spark.append(e.target.result);  // append chunk
    current_chunk++;
    if (current_chunk < chunks) {
      read_next_chunk();
    } else {
      md5 = spark.end();
    }
  };
  function read_next_chunk() {
    var reader = new FileReader();
    reader.onload = onload;
    var start = current_chunk * chunk_size,
        end = Math.min(start + chunk_size, file.size);
    reader.readAsArrayBuffer(slice.call(file, start, end));
  };
  read_next_chunk();
}
  $("#chunked_upload").fileupload({
    url: "{% url 'api_chunked_upload' %}",
    dataType: "json",
    maxChunkSize: 100000, // Chunks of 100 kB
    formData: form_data,
    add: function(e, data) { // Called before starting upload
      $("#messages").empty();
      // If this is the second file you're uploading we need to remove the
      // old upload_id and just keep the csrftoken (which is always first).
      form_data.splice(1);
      calculate_md5(data.files[0], 100000);  // Again, chunks of 100 kB
      data.submit();
    },
    chunkdone: function (e, data) { // Called after uploading each chunk
      if (form_data.length < 2) {
        form_data.push(
          {"name": "upload_id", "value": data.result.upload_id}
        );
      }
      $("#messages").append($('<p>').text(JSON.stringify(data.result)));
      var progress = parseInt(data.loaded / data.total * 100.0, 10);
      /*$("#progress").text(Array(progress).join("=") + "> " + progress + "%");*/
      $('#progress .progress-bar').css('width',progress + '%');
      $('#progress .progress-bar').css('aria-valuenow',progress + '%');
    },
    done: function (e, data) { // Called when the file has completely uploaded
      $.ajax({
        type: "POST",
        url: "{% url 'api_chunked_upload_complete' %}",
        data: {
          csrfmiddlewaretoken: csrf,
          upload_id: data.result.upload_id,
          md5: md5
        },
        dataType: "json",
        success: function(data) {
          $("#messages").append($('<p>').text(JSON.stringify(data)));

        }
      });
    },
  });

</script>

此代码将文件上传到带有进度条的多个部分。问题是我希望代码仅在我单击按钮加载时才运行，而不是如何运行。

我尝试如下：

<input id="chunked_upload" type="file" name="the_file">
<button id="enviar">Enviar</button>


<script type="text/javascript">
var md5 = "",
    csrf = $("input[name='csrfmiddlewaretoken']")[0].value,
    form_data = [{"name": "csrfmiddlewaretoken", "value": csrf}];
function calculate_md5(file, chunk_size) {
  var slice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
      chunks = chunks = Math.ceil(file.size / chunk_size),
      current_chunk = 0,
      spark = new SparkMD5.ArrayBuffer();
  function onload(e) {
    spark.append(e.target.result);  // append chunk
    current_chunk++;
    if (current_chunk < chunks) {
      read_next_chunk();
    } else {
      md5 = spark.end();
    }
  };
  function read_next_chunk() {
    var reader = new FileReader();
    reader.onload = onload;
    var start = current_chunk * chunk_size,
        end = Math.min(start + chunk_size, file.size);
    reader.readAsArrayBuffer(slice.call(file, start, end));
  };
  read_next_chunk();
}
$('button#enviar').click(function(){
  $("#chunked_upload").fileupload({
    url: "{% url 'api_chunked_upload' %}",
    dataType: "json",
    maxChunkSize: 100000, // Chunks of 100 kB
    formData: form_data,
    add: function(e, data) { // Called before starting upload
      $("#messages").empty();
      // If this is the second file you're uploading we need to remove the
      // old upload_id and just keep the csrftoken (which is always first).
      form_data.splice(1);
      calculate_md5(data.files[0], 100000);  // Again, chunks of 100 kB
      data.submit();
    },
    chunkdone: function (e, data) { // Called after uploading each chunk
      if (form_data.length < 2) {
        form_data.push(
          {"name": "upload_id", "value": data.result.upload_id}
        );
      }
      $("#messages").append($('<p>').text(JSON.stringify(data.result)));
      var progress = parseInt(data.loaded / data.total * 100.0, 10);
      /*$("#progress").text(Array(progress).join("=") + "> " + progress + "%");*/
      $('#progress .progress-bar').css('width',progress + '%');
      $('#progress .progress-bar').css('aria-valuenow',progress + '%');
    },
    done: function (e, data) { // Called when the file has completely uploaded
      $.ajax({
        type: "POST",
        url: "{% url 'api_chunked_upload_complete' %}",
        data: {
          csrfmiddlewaretoken: csrf,
          upload_id: data.result.upload_id,
          md5: md5
        },
        dataType: "json",
        success: function(data) {
          $("#messages").append($('<p>').text(JSON.stringify(data)));

        }
      });
    },
  });
})

这个方法的问题是：

我必须先单击然后选择文件。

而且应该是反转的地方必须先选中文件然后点击才能工作。

需要议会怎么做

Answer 1

在模板中创建一个按钮并替换：

data.submit();

作者：

$("#SubmitButtonid").off('click').on('click', function () {
      data.submit();
});