bugblast Ответов: 0

Как показать миниатюру загруженного изображения на массиве

У меня есть несколько входов с миниатюрой изображения у меня есть проблемы с миниатюрой изображения, после загрузки миниатюра отображается только в первой строке

вот этот скрипт кодирования использовать PHP начальной загрузки JavaScript

.wrap-custom-file-thumb {
  position: relative;
  display: inline-block;
 /*** width: 35px;
  height: 35px;**/
  width:100px;
  height:100px;
  margin: 0 0.5rem 1rem;
  text-align: center;
  border:dashed #CCCCCC 2px ;
}

.wrap-custom-file-thumb input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
}
.wrap-custom-file-thumb label {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding: 0 0.5rem;
  cursor: pointer;
  background-color:none;
  border-radius: 4px;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}

.wrap-custom-file-thumb label span {
  display: block;
  margin-top: 2rem;
  font-size: 1.4rem;
  color: #777;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.wrap-custom-file-thumb label .fas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translatex(-50%);
  transform: translatex(-50%);
  font-size: 1.5rem;
  color: lightcoral;
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
}

.wrap-custom-file-thumb label:hover span, .wrap-custom-file-thumb label:hover .fas {
  color: #333;
}
.wrap-custom-file-thumb label.file-ok {
  background-size: cover;
  background-position: center;
}
.wrap-custom-file-thumb label.file-ok span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.3rem;
  font-size: 1.1rem;
  color: #000;
  background-color: rgba(255, 255, 255, 0.7);
}
.wrap-custom-file-thumb label.file-ok .fas {
  display: none;
}



<pre><script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<section class="content">   

<form role="form" name="addform" id="addform" method="post" enctype="multipart/form-data" autocomplete="off">
<div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">Price</h3>
        </div>  
        <div class="box-body">  
           <div class="row">
           <div class="col-md-12">
             <div class="table-responsive">
             <table class="table" id="varian_table">
               <thead>
                <tr >
               <th scope="col">Varian</th>
               <th scope="col">Price</th>
               <th scope="col">Stock</th>
               <th scope="col">img</th>
               <th scope="col"></th>
                </tr>
               </thead>
                <tbody>
                 <tr id="row1">
                    <td> <div class="form-group"><input type="text" name="varian[]" class="form-control"></div></td>
                   <td>
                   <div class="form-group">
                       <div class="input-group">
                         <span class="input-group-addon">USD.</span>
                         <input type="text" name="price[]" class="form-control">
                       </div>
                   </div>
                   </td>
                   <td>
                   <div class="form-group">
                       <input type="text" name="stock[]" class="form-control">  
                   </div>                 
                  </td>
                  <td>
                   <div class="form-group">
                       <div class="wrap-custom-file-thumb">
                        <input type="file" class="imagevar[]" id="imagevar[]" name="imagevar[]"  accept=".jpg" multiple/>
                           <label for="imagevar[]">
                           <span>img</span>
                           
                           </label>
                        </div>  
                   </div>                 
                  </td>
                
                </tr>
              </tbody>
              </table>
              </div>
             </div>
           </div>
           
           <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                 <button type="button" class="btn btn-success btn-sm" onClick="add_row();">Add Varian</button>
              </div>
            </div>
           </div>
           
           
           
        </div>
</div>




<div class="box box-solid">
  <div class="box-body">
    <button type="submit" class="btn btn-success" id="submit_button" name="submit_button">Save</button>
    <button class="btn btn-default" id="cancel_button" name="cancel_button" onClick="window.location='product'" type="button">Cancel</button>
  </div>
</div>

</form>
</section>



<pre>$("input[name^='imagevar[]']").each(function(){
  // Refs
  var $file = $(this),
      $label= $file.next('label');
      
  // When a new file is selected
  $file.on('change', function(event){
    var fileName = $file.val().split( '\\' ).pop(),
        tmppath = URL.createObjectURL(event.target.files[0]);
    
    //Check successfully selection
    if( fileName )
    {
      $label
        .addClass('file-ok')
        .css('background-image', 'url(' + tmppath + ')');
    }
    else
    {
      $label.removeClass('file-ok');
      $label.css('background-image', '');
    }
    
    
  });
});

function add_row()
{
 $rowno=$("#varian_table tr").length;
 $rowno=$rowno+1;
 $("#varian_table tr:last").after("<tr id='row"+$rowno+"'><td><div class='form-group'><input type='text' name='varian[]' class='form-control'></div></td><td><div class='form-group'><input type='text' name='price[]'  class='form-control'></div></td><td><div class='form-group'><input type='text' name='stock[]' class='form-control'></div></td><td><div class='form-group'><div class='wrap-custom-file-thumb'><input type='file' name='imagevar[]' class='imagevar[]' id='imagevar[]' accept='.jpg'/><label for='imagevar[]'>"></label></div></div></td><td><div class='form-group'><input type='button' class='btn btn-danger btn-sm' value='delete' onclick=delete_row('row"+$rowno+"')></div></td></tr>");

  
}

function delete_row(rowno)
{
 $('#'+rowno).remove();
}

.wrap-custom-file-thumb {
  position: relative;
  display: inline-block;
 /*** width: 35px;
  height: 35px;**/
  width:100px;
  height:100px;
  margin: 0 0.5rem 1rem;
  text-align: center;
  border:dashed #CCCCCC 2px ;
}

.wrap-custom-file-thumb input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0;
}
.wrap-custom-file-thumb label {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  padding: 0 0.5rem;
  cursor: pointer;
  background-color:none;
  border-radius: 4px;
  -webkit-transition: -webkit-transform 0.4s;
  transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  transition: transform 0.4s, -webkit-transform 0.4s;
}

.wrap-custom-file-thumb label span {
  display: block;
  margin-top: 2rem;
  font-size: 1.4rem;
  color: #777;
  -webkit-transitio



Что я уже пробовал:

every row sure be show thumbnail when upload image not only first row, i was try with tag id array or tag class array but not working, what wrong with this script? any suggest? pleas help , thank before ^ ^

0 Ответов