J'essaye de lister mon tri de preuploader d'image par nom mais j'ai quelques problèmes.j'ai une douzaine d'images avec le nom img001 - img100 mais quand j'entre que le résultat montre les fichiers triés par taille d'image. voici mon code

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <title>generate nama ikan</title>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            <div class="container">
              <div class="row">
                <div class="col-md-12">
                  <h1>Nama Ikan</h1>
                  <input id="ingambar" type="file" multiple />
                </div>
              </div>
              <div class="row">
                <div class="col-md-12">
                  <div class="content">
                      <br />
                        <table class="table">
                          <thead>
                            <th>gambar</th><th>nama</th>
                          </thead>
                          <tbody></tbody>
                        </table>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script>
    $('#ingambar').change(function () {
        for (var i=0, len = this.files.length; i < len; i++) {
            (function (j, self) {
                var reader = new FileReader()
                reader.onload = function (e) {
                    $('tbody').append('<tr><td><img width="100px" src="' + e.target.result + '"></td><input class="form-control" type="text" value="' + self.files[j].name.slice(0, -4) + '" name="namaikan[]" disabled/></td></tr>')
                }
                reader.readAsDataURL(self.files[j])
            })(i, this);
        }
    });
    </script>
</html>

Quelqu'un peut-il me montrer comment le faire?

0
Andi Haidar 23 mai 2018 à 13:52

3 réponses

Meilleure réponse

Pour y parvenir, vous pouvez sort() les lignes du tableau après en avoir ajouté un nouveau, en fonction de la valeur du input contenu dans la ligne. Essaye ça:

$('#ingambar').change(function() {
  for (var i = 0, len = this.files.length; i < len; i++) {
    (function(j, self) {
      var reader = new FileReader()
      reader.onload = function(e) {
        $('tbody').append('<tr><td><img width="100px" src="' + e.target.result + '"></td><td><input class="form-control" type="text" value="' + self.files[j].name.slice(0, -4) + '" name="namaikan[]" disabled/></td></tr>');
        sortFiles();
      }
      reader.readAsDataURL(self.files[j])
    })(i, this);
  }
});

function sortFiles() {
  $('.table tbody tr').sort(function(a, b) {
    var $a = $(a).find('input'),
      $b = $(b).find('input');
    return $a.val().localeCompare($b.val());
  }).appendTo('.table tbody');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="flex-center position-ref full-height">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Nama Ikan</h1>
        <input id="ingambar" type="file" multiple />
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="content">
          <br />
          <table class="table">
            <thead>
              <th>gambar</th>
              <th>nama</th>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
1
Rory McCrossan 23 mai 2018 à 11:09

Vous pouvez trier à l'aide de la fonction de création de tableau javascripts à l'aide d'une fonction de tri personnalisée avec localeCompare. L'insertion de ce qui suit juste avant la boucle for devrait faire ce que vous voulez.

this.files.sort((fileA, fileB) => fileA.name.localeCompare(fileB.name));

À condition que this.files soit un tableau de fichiers ayant un attribut nom .

0
Felix Lemke 23 mai 2018 à 11:03

Au lieu d'afficher les images au fur et à mesure que vous les lisez, vous pouvez plutôt les mettre toutes dans un tableau avec la même boucle for. Triez ensuite le nouveau tableau avec une fonction de tri. Et puis vous venez de parcourir le tableau et de les afficher. Travaille pour moi!

0
Benjamhw 23 mai 2018 à 11:03