1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Como implementarle un botón al siguiente código jquery?

Tema en 'Jquery' comenzado por SCORPIOTX100, 26 de Julio de 2016.

  1. SCORPIOTX100

    SCORPIOTX100 Nuevo Miembro

    Se incorporó:
    26 de Julio de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    La verdad no se mucho de jquery, me estoy especializando mas en django, el problema que tengo es que encontré una librería para subir archivos pesados con django en varios trozos, mas sin embargo esta librería viene con un ejemplo jquery donde muestra el progreso en una barra de progreso, el código funciona de la siguiente forma:


    Al seleccionar el archivo con el input :
    Código (Text):
    <input id="chunked_upload" type="file" name="the_file">
    automáticamente se ejecuta el siguiente código :

    Código (Text):
    <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: 2500000, // 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], 2500000);  // 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>
    Pero me gustaría que no se ejecutara automáticamente al seleccionar el archivo, sino que se ejecutara cuando le de click a un botón llamado cargar, lo intente de la siguiente manera pero:

    Código (Text):
    <input id="chunked_upload" type="file" name="the_file">
    <button id="cargar">Cargar</button>
    Código (Text):
    <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#cargar').click(function(){
          $("#chunked_upload").fileupload({
            url: "{% url 'api_chunked_upload' %}",
            dataType: "json",
            maxChunkSize: 2500000, // 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], 2500000);  // 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)));

                }
              });
            },
          });
        })
    Pero no funciona como debería, al hacerlo de esta forma tengo que darle click primero al botón cargar y después seleccionar el archivo cuando debería ser al revés.

    por favor, cualquier consejo que me puedan dar.
     
  2. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.106
    Me gusta recibidos:
    490
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    Prueba con este y dime que tal:
    Código (Javascript):
    <script type="text/javascript">
    $("#cargar").click(function() {
      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: 2500000, // 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], 2500000);  // 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>
     
  3. SCORPIOTX100

    SCORPIOTX100 Nuevo Miembro

    Se incorporó:
    26 de Julio de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    sigue el mismo problema, tengo que darle click al botón cargar primero y después debo seleccionar el archivo cuando debería ser al revés.
     
  4. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.106
    Me gusta recibidos:
    490
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
  5. SCORPIOTX100

    SCORPIOTX100 Nuevo Miembro

    Se incorporó:
    26 de Julio de 2016
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
  6. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.106
    Me gusta recibidos:
    490
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:

Comparte esta página