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

Question

事实上，这是非常小的jQuery，我有以下jQuery代码与Django，它是做什么的。

选择文件：

<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(); 
});