Js input type=“file” частично не работает код

285

26 октября 2017, 11:13

Здравствуйте. Я не знаток js прошел курсы и практикуюсь. в инете был найдет скрипт отвечающий моим задачам на 90%. доработал немного, но возникли ошбки. Прошу помочь.

1-я. Проблема в том что когда я загружаю файлы пример: я загрузил 1 файл он уменя под номером 1, если я загружу еще один то и тот будет под номером один. Необходимо чтобы шли по порядку. 2-я. Проблема если на странице два input type="file" второй не работает.

Господа СПАСАЙТЕ )

https://jsfiddle.net/Jaljalet/2rnpruLk/3/

скрипт ниже по ссылке.

function handleFileSelect(evt) { 
  var files = evt.target.files; 
  var y = 1; 
  for (var i = 0, f; f = files[i]; i++) { 
 
    var reader = new FileReader(); 
    reader.onload = (function(theFile) { 
      return function(e) { 
        var li = document.createElement('li'); 
        li.innerHTML = ['<strong>' + (y++) + ' -</strong>', escape(theFile.name), '<span class="fa fa-times removeLi" aria-hidden="true"></span></li>'].join(''); 
        document.getElementById('list').insertBefore(li, null); 
        $('.removeLi').click(function(e) { 
          $(this).parent().remove(); 
        }); 
      }; 
 
 
    })(f); 
    reader.readAsDataURL(f); 
  } 
} 
 
document.getElementById('logoBefore').addEventListener('change', handleFileSelect, false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<section class="form-block logo-form"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-sm-12"> 
        <div class="form-logo"> 
          <form action="" method="post" id="formLogo"> 
            <div class="form-group clearfix"> 
              <div class="form-control file-upload" id="logoBefore" name="logoBefore" data-text="Varsa daha önceki logonuzu (ai/eps/psd) formatında yükleyiniz."> 
                <input type="file" id="LogoUpload" multiple> 
              </div> 
              <ul class="col-sm-7 col-md-5 col-lg-4 uploaded-file" id="list"></ul> 
            </div> 
 
            <div class="form-group clearfix"> 
              <div class="form-control file-upload" id="logoOrnek" name="logoOrnek" data-text="Varsa daha önceki logonuzu (ai/eps/psd) formatında yükleyiniz."> 
                <input type="file" id="LogoUpload" multiple> 
              </div> 
              <ul class="col-sm-7 col-md-5 col-lg-4 uploaded-file" id="list"></ul> 
            </div> 
          </form> 
        </div> 
      </div> 
    </div> 
  </div> 
</section>

Answer 1

Вынесите var y = 1; из тела функции
На загрузку со второго input не висит слушатель. Нужно добавить document.getElementById('logoOrnek').addEventListener('change', handleFileSelect, false);

Поскольку файлы нужно отображать в разных списках, необходимо еще несколько изменений:

var y = {list: 1, list2: 1};
function handleFileSelect(evt, list_id) {
    var files = evt.target.files;
    for (var i = 0, f; f = files[i]; i++) {
      var reader = new FileReader();
      reader.onload = (function(theFile) {
        return function(e) {
          var li = document.createElement('li');
          li.innerHTML = ['<strong>' + (y[list_id]++) + ' -</strong>', escape(theFile.name), '<span class="fa fa-times removeLi" aria-hidden="true"></span></li>'].join('');
          document.getElementById(list_id).insertBefore(li, null);
            $('.removeLi').click(function (e) {
                $(this).parent().remove();
            });
        };
      })(f);
      reader.readAsDataURL(f);
    }
  }
document.getElementById('logoBefore').addEventListener('change', function(event){handleFileSelect(event, 'list');}, false);
document.getElementById('logoOrnek').addEventListener('change', function(event){handleFileSelect(event, 'list2');}, false);

https://jsfiddle.net/2rnpruLk/6/