Как установить имя (value) для input type=file?

Question

[My1Name]

На странице html есть форма, в которую нужно установить значения после загрузки страницы. А именно - имена изображений если те в свою очередь есть.
HTML

<form id="pictures" method="POST" enctype="multipart/form-data">
<div style="display:-webkit-box;">
<div id="image-1" class="U-image"><span class="trash-image glyphicon glyphicon-trash" onclick="removeImage(1)"> </span></div>
<input type="file" id="1" style="display:none;" name="image" accept="image/png, image/jpeg, image/gif">
<div id="image-2" class="U-image"><span class="trash-image glyphicon glyphicon-trash" onclick="removeImage(2)"> </span></div>
<input type="file" id="2" style="display:none;" name="image" accept="image/png, image/jpeg, image/gif">
<div id="image-3" class="U-image"><span class="trash-image glyphicon glyphicon-trash" onclick="removeImage(3)"> </span></div>
<input type="file" id="3" style="display:none;" name="image" accept="image/png, image/jpeg, image/gif">
<div id="image-4" class="U-image"><span class="trash-image glyphicon glyphicon-trash" onclick="removeImage(4)"> </span></div>
<input type="file" id="4" style="display:none;" name="image" accept="image/png, image/jpeg, image/gif">
<button type="submit" class="btn btn-default" style="float:right;"><b>Ok!</b></button>
</div>
</form>

Нужно проверить имена файлов на сервере, а приходят в лучшем случае пустые строки.
JS

$(window).ready(function(){
let items = $('#carousel').find('img').map(function(){ return $(this).attr('src'); }).get();
let sImg = $('#pictures');
for(x=1; x<items.length+1; x++){
	$(sImg).find('#image-'+x).css({'background-image': "url("+items[x-1]+")"});
	var fInput = $('#pictures #'+x);
	let f = 'S-'+x+'.jpg'; // имена задаются по факту наличия изображения.
	const fileTMP = new File (['Empty file'], f,{
		type : 'text/plain', lastModified : new Date(),
	});
	const dataTransfer = new DataTransfer();
	dataTransfer.items.add(fileTMP);
	fInput.files = dataTransfer.files;
	alert(fInput); 	    // [object Object]
	alert(fInput.name); // undefined!!
	}
}

Как установить имя для input type="file" ?

Comments

[My1Name]

Ссылка для наглядности о чём идёт речь. Нужно избавиться от чекбоксов.

[Ivan Ustûžanin]

никак, для такого используется input type=hidden с value по id или чем-то похожим, а value невозможно установить для type=file

[My1Name]

IvanU7n, тут пишут, что это возможно. Я проверил и это в общем-то работает, но с одним input=file... А у меня их 4 и у меня не получается на ваниле обойти их все.

[Ivan Ustûžanin]

My1Name, оказывается и правда можно, хоть и через одно место, но не суть
возвращает объект jQuery, он при всём желании не будет вести себя как HTMLInputElement, если я правильно помню, то [0] от $() вернёт то что нужно

Answer 1

[My1Name]

var x = 1;
const fInput = document.querySelectorAll('input[type="file"]');
Array.from(fInput).forEach(function(el){
	if(el.getAttribute('id')==x && x<=items.length){
	   let f = items[x-1];
	   let fileTMP = new File (['Empty file'], f,{
	      type : 'text/plain', lastModified : new Date(),
	   });
	   const dataTransfer = new DataTransfer();
	   dataTransfer.items.add(fileTMP);
	   el.files = dataTransfer.files;
	   if(el.webkitEntries.length)
	     el.dataset.file = '{dataTransfer.files[0].name}';
	   x++;
	}
});

Comments

[My1Name]

jQuery

function setNameFiles(div, data){
var name, fileTMP;
const fInput = $(div).find('input[type="file"]');
for(i=0;i<data.length;i++){
	name = data[i];
	fileTMP = new File (['Empty file'], name,{
		type : 'text/plain', lastModified : new Date(),
	});
	const dataTransfer = new DataTransfer();
	dataTransfer.items.add(fileTMP);
	fInput[i].files = dataTransfer.files;
	if(fInput[i].webkitEntries.length)
	   fInput[i].dataset.file = '{dataTransfer.files[0].name}';
	}
}