Call function for created div only

Asked

Viewed 306 times

2

Good afternoon gentlemen, I’m trying to apply the plugin jQuery File Upload. Really it is a simple and intuitive plugin, the problem is that I need to create, within the same page, several divs image upload, for example:

                 //upload
                $(function() {
                  // Change this to the location of your server-side upload handler:
                  var url = 'tmp/inspecao/',
                    uploadButton = $('<button type="button"/>')
                    .addClass('btn btn-primary')
                    .prop('disabled', true)
                    .text('Processing...')
                    .on('click', function() {
                      var $this = $(this),
                        data = $this.data();
                      $this
                        .off('click')
                        .text('Abort')
                        .on('click', function() {
                          $this.remove();
                          data.abort();
                        });
                      data.submit().always(function() {
                        $this.remove();
                      });
                    });
                  $('.fileupload').fileupload({
                      url: url,
                      dataType: 'json',
                      autoUpload: false,
                      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                      maxFileSize: 999000,
                      // Enable image resizing, except for Android and Opera,
                      // which actually support image resizing, but fail to
                      // send Blob objects via XHR requests:
                      disableImageResize: /Android(?!.*Chrome)|Opera/
                        .test(window.navigator.userAgent),
                      previewMaxWidth: 100,
                      previewMaxHeight: 100,
                      previewCrop: true
                    }).on('fileuploadadd', function(e, data) {
                      var aux = event.target.id.split(':');
                      data.context = $('<div class="img">').appendTo('#files' + aux[1]);
                      $.each(data.files, function(index, file) {
                        var node = $('<p/>').append($('<span class="text-primary"/>').text(file.name));
                        if (!index) {
                          node.append('<br>').append(uploadButton.clone(true).data(data));
                        }
                        node.appendTo(data.context);
                      });
                    }).on('fileuploadprocessalways', function(e, data) {
                      var index = data.index,
                        file = data.files[index],
                        node = $(data.context.children()[index]);
                      if (file.preview) {
                        node
                          .prepend('<br>')
                          .prepend(file.preview);
                      }
                      if (file.error) {
                        node
                          .append('<br>')
                          .append($('<span class="text-danger"/>').text(file.error));
                      }
                      if (index + 1 === data.files.length) {
                        data.context.find('button')
                          .text('Enviar')
                          .prop('disabled', !!data.files.error);
                      }
                    }).on('fileuploadprogressall', function(e, data) {
                      var progress = parseInt(data.loaded / data.total * 100, 10);
                      $('.progress .progress-bar').css(
                        'width',
                        progress + '%'
                      );
                    }).on('fileuploaddone', function(e, data) {
                      $.each(data.result.files, function(index, file) {
                        if (file.url) {
                          var link = $('<span class="text-success">').text('Enviada');
                          $(data.context.children()[index]).wrap(link);
                        } else if (file.error) {
                          var error = $('<span class="text-danger"/>').text(file.error);
                          $(data.context.children()[index])
                            .append('<br>')
                            .append(error);
                        }
                      });
                    }).on('fileuploadfail', function(e, data) {
                      $.each(data.files, function(index) {
                        var error = $('<span class="text-danger"/>').text('Falha no envio');
                        $(data.context.children()[index])
                          .append('<br>')
                          .append(error);
                      });
                    }).prop('disabled', !$.support.fileInput)
                    .parent().addClass($.support.fileInput ? undefined : 'disabled');
                });
                 //upload
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <div class="up1" <br><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>Adicionar imagens referente a este parágrafo</span>
      <input id="upload" class="fileupload" type="file" name="files[]" multiple="true">
      </span>
      <br>
      <br>
      <div class="progress">
        <div class="progress-bar progress-bar-success"></div>
      </div>
      <div id="files" class="files"></div>
      <br>
    </div>
    <div class="up2" <br><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>Adicionar imagens referente a este parágrafo</span>
      <input id="upload" class="fileupload" type="file" name="files[]" multiple="true">
      </span>
      <br>
      <br>
      <div class="progress">
        <div class="progress-bar progress-bar-success"></div>
      </div>
      <div id="files" class="files"></div>
      <br>
    </div>

    <div class="up3" <br><span class="btn btn-success fileinput-button"><i class="glyphicon glyphicon-plus"></i><span>Adicionar imagens referente a este parágrafo</span>
      <input id="upload" class="fileupload" type="file" name="files[]" multiple="true">
      </span>
      <br>
      <br>
      <div class="progress">
        <div class="progress-bar progress-bar-success"></div>
      </div>
      <div id="files" class="files"></div>
      <br>
    </div>

The problem is that all thumbnails (both of the upload 1, 2 and 3) go to the upload 1.

Faced with this, I wonder if there is any way to call the function just within each div. (up1, up2, up3...). Thank you all!

1 answer

3


I think it should be the id, the id is unique and so it is not working, each call should have its different id. You could set an example

<input id="upload1"

Browser other questions tagged

You are not signed in. Login or sign up in order to post.