Невозможно загрузить второе изображение в той же форме

Question

Я использую Βootstrap и jQuery File Upload Plugin для формы отправки, и у меня возникла проблема, когда я хочу отправить второе изображение, когда я добавлю второй элемент в форму.

Примечание:Форма инициирует UploadGandler плагина загрузки файла jQuery как есть, без каких-либо изменений.

HTML

<form id="edit-form" method="post" action="save.php" class="form-horizontal" enctype="multipart/form-data"> 
    <div class="col-sm-12 input-div-body"> 

     <? if ($saveddata->num_rows !== 0) { ?> 
      <? foreach ($saveddata as $data) { ?> 
       <!-- form inputs --> 
       <div id="form-inputs" class="form-inputs"> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label">Όνομα:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" name="name[]" value="<?= $data['name'] ?>"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label">Μέγεθος:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" name="size[]" value="<?= $data['size'] ?>"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label">Πέλμα:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" name="tread[]" value="<?= $data['tread'] ?>"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label">Διαθέσιμο:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" name="availability[]" 
            value="<?= $data['availability'] ?>"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-2 control-label">Εικόνα:</label> 
         <div class="col-sm-8"> 
          <!-- The fileinput-button span is used to style the file input field as button --> 
          <span class="btn btn-default fileinput-button"> 
              <i class="glyphicon glyphicon-picture"></i> 
              <span id="files"><?= !empty($data['image']) ? $data['image'] : 'Προσθήκη Εικόνας...' ?></span> 
           <!-- The file input field used as target for the file upload widget --> 
              <input id="fileupload" type="file" name="files[]" data-url="server/php/" 
                multiple> 
             </span> 
          <!-- The global progress bar --> 
          <div id="progress" class="progress hidden"> 
           <div class="progress-bar progress-bar-info progress-bar-striped"></div> 
          </div> 
          <input type="hidden" name="id[]" value="<?= $data['id'] ?>"> 
          <input id=image type="hidden" name="image[]" value="<?= $data['image'] ?>"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-offset-2 col-sm-10"> 
          <button id="<?= $data['id'] ?>" type="button" class="btn btn-danger btn-remove"> 
           <span class="glyphicon glyphicon-remove"></span> Αφαίρεση 
          </button> 
         </div> 
        </div> 
       </div> <!-- /form-inputs --> 
       <hr> 
      <? } 
     } else { ?> 
      <!-- form inputs --> 
      <div id="form-inputs" class="form-inputs"> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">Όνομα:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" name="name[]"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">Μέγεθος:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" name="size[]"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">Πέλμα:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" name="tread[]"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">Διαθέσιμο:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" name="availability[]"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label class="col-sm-2 control-label">Εικόνα:</label> 
        <div class="col-sm-8"> 
         <!-- The fileinput-button span is used to style the file input field as button --> 
         <span class="btn btn-default fileinput-button"> 
              <i class="glyphicon glyphicon-picture"></i> 
              <span id="files"><?= !empty($data['image']) ? $data['image'] : 'Προσθήκη Εικόνας...' ?></span> 
          <!-- The file input field used as target for the file upload widget --> 
              <input id="fileupload" type="file" name="files[]" data-url="server/php/" 
                multiple> 
             </span> 
         <!-- The global progress bar --> 
         <div id="progress" class="progress hidden"> 
          <div class="progress-bar progress-bar-info progress-bar-striped"></div> 
         </div> 
         <input type="hidden" name="id[]" value="<?= $data['id'] ?>"> 
         <input id=image type="hidden" name="image[]" value="<?= $data['image'] ?>"> 
        </div> 
       </div> 
      </div> <!-- /form-inputs --> 
      <hr> 
     <? } ?> 
    </div> <!-- /input-div-body --> 

    <input type="hidden" name="form" value="edit-form"> 
    <input type="hidden" name="category" value="<?= $category ?>"> 
    <input type="hidden" name="type" value="<?= $type ?>"> 

    <div id="form-group-btn" class="form-group"> 
     <div class="col-sm-offset-2 col-sm-10"> 
      <button id="btn-add-more" type="button" class="btn btn-success"> 
       <span class="glyphicon glyphicon-plus"></span> Προσθήκη 
      </button> 
      <button type="submit" class="btn btn-primary"> 
       <span class="glyphicon glyphicon-floppy-disk"></span> Αποθήκευση 
      </button> 
      <a href="#" target="_blank"> 
       <button type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-list-alt"></span> Προβολή Σελίδας 
       </button> 
      </a> 
     </div> 
    </div> 
</form> 

<script src="../js/jquery.ui.widget.js"></script> 
<!-- The Iframe Transport is required for browsers without support for XHR file uploads --> 
<script src="../js/jquery.iframe-transport.js"></script> 
<!-- The basic File Upload plugin --> 
<script src="../js/jquery.fileupload.js"></script> 

<script> 
    /*jslint unparam: true */ 
    /*global window, $ */ 
    $(function() { 
     'use strict'; 
     // Change this to the location of your server-side upload handler: 
     var url = 'server/php/'; 
     $('#fileupload').fileupload({ 
      url: url, 
      dataType: 'json', 
      done: function (e, data) { 
       $.each(data.result.files, function (index, file) { 
        $('#progress').addClass('hidden'); 
        $('#files').text(file.name); 
        $('#image').val(file.name); 
       }); 
      }, 
      progressall: function (e, data) { 
       $('#progress').removeClass('hidden'); 
       var progress = parseInt(data.loaded/data.total * 100, 10); 
       $('#progress .progress-bar').css(
        'width', 
        progress + '%' 
       ); 
      } 
     }).prop('disabled', !$.support.fileInput) 
      .parent().addClass($.support.fileInput ? undefined : 'disabled'); 
    }); 
</script> 

JAVASCRIPT

/* Save form post functions */ 
    $('#edit-form').submit(function (event) { 
     event.preventDefault(); 
     $.ajax({ 
      data: $(this).serialize(), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function (response) { 
       $("#save-alert").removeAttr('hidden'); 
       if (response == 'success') { 
        $("#save-alert").removeClass('alert-danger') 
         .addClass('alert-success') 
         .html('Αποθήκευση επιτυχής') 
         .scrollTop(300); 
        location.reload(true); 
       } else { 
        $("#save-alert").html(response).scrollTop(300); 
       } 
      } 
     }); 
     return false; 
    }); 

Когда пользователь нажимает кнопку "Добавить еще" кнопку, функция следующий JS инициируют, который добавляет копию элемента формы :

$('#btn-add-more').click(function() { 
    $(".input-div-body").append('<!-- form inputs --><div id="form-inputs" class="form-inputs"><div class="form-group"><label class="col-sm-2 control-label">Όνομα:</label><div class="col-sm-8"><input type="text" class="form-control" name="name[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Μέγεθος:</label><div class="col-sm-8"><input type="text" class="form-control" name="size[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Πέλμα:</label><div class="col-sm-8"><input type="text" class="form-control" name="tread[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Διαθέσιμο:</label><div class="col-sm-8"><input type="text" class="form-control" name="availability[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Εικόνα:</label><div class="col-sm-8"><!-- The fileinput-button span is used to style the file input field as button --><span class="btn btn-default fileinput-button"><i class="glyphicon glyphicon-picture"></i><span id="files"> Προσθήκη Εικόνας...</span><!-- The file input field used as target for the file upload widget --><input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple></span><!-- The global progress bar --><div id="progress" class="progress hidden"><div class="progress-bar progress-bar-info progress-bar-striped"></div></div><input type="hidden" name="id[]"><input id=image type="hidden" name="image[]"></div></div></div><!-- /form-inputs --><hr>'); 
}); 

У меня нет ошибок error_log или console. Какие-либо предложения ?

Спасибо заранее

Answer 1

Я думаю, что после того, как вы добавите копию элемента формы, вы должны снова запустить скрипт Загрузить файл

$('#fileupload').fileupload({ ... }) 

Я предлагаю также заменить id FileUpload с микросхемой class fileupload и запустить скрипт с классом, например

$('.fileupload').fileupload({ ... })