javascript - advice to fix the following code with jquery -
at time selected file
<input id="chunked_upload" type="file" name="the_file"> the following code handles file upload in different parts automatically runs
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 second file you're uploading need remove // old upload_id , keep csrftoken (which 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 file has 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))); } }); }, }); but not want code automatically executed. until click next button
<button id="enviar">saludar</button> someone advise me how it
- add click listener
button#enviar.
then
move
fileuploadcall inside callback of click event :$('button#enviar').click(function(){ $("#chunked_upload").fileupload( //.... })
ــــــــ
the whole code becomes :
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(); }); then 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 second file you're uploading need remove // old upload_id , keep csrftoken (which 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 file has 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))); } }); }, }); }
Comments
Post a Comment