建議使用jQuery

Question

修復下面的代碼在你選擇了一個文件時

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

下面的代碼，處理文件上傳的不同部分會自動運行

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

       } 
      }); 
      }, 
     }); 

，但我不希望該代碼被自動執行。直到你只需點擊下一步按鈕

<button id="enviar">Saludar</button> 

有人告訴我該怎麼辦呢

Answer 1

• 添加點擊偵聽button#enviar。

然後

• 移動電話fileupload 內這個點擊事件的回調：

  $('button#enviar').click(function(){ 
  
        $("#chunked_upload").fileupload(
  
         //.... 
  
  
      }) 
  

的整個代碼變爲：

  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(); 
     } 
     $('#enviar').click(function(){ 

       uploadFile(); 
      }); 

然後uploadFile是：

function uploadFile(){ 
     $("#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))); 

        } 
       }); 
       }, 
      }); 


}