Задать значение input.files

181

31 декабря 2019, 00:30

Величайшие умы планеты, подскажите пожалуйста как можно задать значение методу files для input.
История такова, что для загрузки фотографий на тестовый сайт я имею:

<input type="file" accept="image/*" id="uploadImg" name="tmp" value="Фотографії" multiple />

Который формирует превью фотографий (для пользователя) в такой схеме:

<ul id="list"> 
  <li> 
    <img src="images/photos/fari-ford-mustang.jpg" data-rank="1" /> 
  </li> 
  <li> 
    <img src="images/photos/fari-ford-mustang2.jpg" data-rank="2" /> 
  </li> 
</ul>

И input'ы (для отправки на серв) в такой:

<input type="file" name="photos" data-rank="1" /> 
<input type="file" name="photos" data-rank="2" />

На англ. версии stackoverflow есть "такой же" вопрос с описанием его работы.
Изучив статью на MSDN, мне не удалось ни коим образом решить это задание.
Кто имел подобный опыт с изменением значение input.files ?!

Собственно весь код моих творений:

function ShowFile(e) { 
  var files = e.target.files; 
  for (var i = 0, f; f = files[i]; i++) { 
    if (!f.type.match('image.*')) continue; 
    var fr = new FileReader(); 
    fr.onload = (function(theFile) { 
      return function(e) { 
        $('#list').append('<li><img src="' +e.target.result+ '" /></li>').css('background-image', 'none'); 
        $('#photoInputs').append('<input type="file" name="photos" />'); 
        $('#photoInputs input[name="photos"]').last().files = theFile; // underfined 
      }; 
    })(f);         
    fr.readAsDataURL(f) 
  } 
}

Answer 1

На данный момент изменил подход выбора и загрузки файлов на сайт.
Раньше можно было выбрать несколько файлов (свойство multiply), однако из-за неизвестности, как их разбить в дальнейшем, переработал на загрузку по одному файлу в уже статические input'ы.
Результат работы можете посмотреть все на той же тестовой версии.
Но вопрос остаеться в силе, так как выбирать файлы "по одному", а не "все сразу" при возможности что человек хочет добавить 20 объявлений - дело не самое радужное.

Код имеет такой вид:

<ul id="list"> 
  <li> 
    <span class="glyphicon glyphicon-remove icons"></span> 
      <label> 
        <img src="images/photos/fari-ford-mustang.jpg" /> 
        <input type="file" name="photos" accept="image/*" /> 
        <input type="checkbox" name="delPhotos" /> 
      </label> 
  </li> 
  <li> 
    <span class="glyphicon glyphicon-remove icons"></span> 
      <label> 
        <img src="images/photos/fari-ford-mustang7.jpg" /> 
        <input type="file" name="photos" accept="image/*" /> 
        <input type="checkbox" name="delPhotos" /> 
      </label> 
  </li> 
</ul>