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

Ссылка скопирована
JavaScript
1 ответ

На странице 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>

<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!! 	} }

$(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" ?

Дополнительно:

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

  • никак, для такого используется input type=hidden с value по id или чем-то похожим, а value невозможно установить для type=file
  • IvanU7n, тут пишут, что это возможно. Я проверил и это в общем-то работает, но с одним input=file... А у меня их 4 и у меня не получается на ваниле обойти их все.
  • My1Name, оказывается и правда можно, хоть и через одно место, но не суть
    возвращает объект jQuery, он при всём желании не будет вести себя как HTMLInputElement, если я правильно помню, то [0] от $() вернёт то что нужно 

    • 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++; 	} });

    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++; } });

    • 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}'; 	} }

      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}'; } }

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Андрей PHP Ответ

    Для установки значения (имени) для элемента input type=file в HTML, вы можете использовать атрибут accept. Этот атрибут позволяет указать типы файлов, которые пользователь может выбрать при загрузке на вашем сайте. Например, если вы хотите, чтобы пользователь мог выбирать только изображения, вы можете установить значение "image/*" для атрибута accept.

    Пример использования:

     

    Если вам нужно установить значение по умолчанию для элемента input type=file, то это нельзя сделать из HTML. Однако, вы можете использовать JavaScript для этого. Вот пример кода, который позволит установить значение для элемента input type=file:

     
<button>Set Default File</button>
 
 
function setDefaultFile() {
  var fileInput = document.getElementById('myFileInput');
  var file = new File(["default content"], "filename.txt", { type: "text/plain" });
  fileInput.files = [file];
}

    <button>Set Default File</button> function setDefaultFile() { var fileInput = document.getElementById('myFileInput'); var file = new File(["default content"], "filename.txt", { type: "text/plain" }); fileInput.files = [file]; }

    В этом примере, при нажатии на кнопку "Set Default File", будет установлено значение для элемента input type=file. Обратите внимание, что это значение будет иметь вид "default content" и будет иметь имя "filename.txt".

    Надеюсь, это поможет вам установить имя (value) для элемента input type=file на вашем сайте. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Telegram Как диагностировать ошибку с подключением к прокси в мобильном приложении Telegram? 1 ответ