ボタンで次の関数jqueryを実行するには？

Question

真実は非常に小さいjqueryです。私はdjangoで次のjqueryコードを持っています。次の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"> 

：

は、ファイルを選択します。問題は、ボタンをクリックするだけでコードが実行されるようにし、コードを実行したくないということです。次のように

私が試した：私が最初にクリックする必要があり、その後、私は、ファイルを選択し

：

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