Как установить значение для ввода файла в HTML?
Примечание:
Ответы и комментарии ниже отражают состояние устаревших браузеров в 2009 году. Теперь вы можете реально установить значение элемента ввода файла динамически/программно с помощью JavaScript и объекта dataTransfer или FileList в 2017 году.
См. ответ в этом вопросе для получения подробной информации, а также демо:
Как установить значение ввода файла программно (например: при перетаскивании файлов)?
Как я могу установить значение этого?
<input type="file" />
Ответы
Ответ 1
Вы не можете из-за соображений безопасности.
Представьте себе:
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>
Вы не хотите, чтобы сайты, которые вы посещали, могли это сделать, не так ли? =)
Ответ 2
Вы не можете.
Единственный способ установить значение ввода файла - это выбрать файл.
Это сделано по соображениям безопасности. В противном случае вы сможете создать Javascript, который автоматически загрузит определенный файл с компьютера-клиента.
Ответ 3
Не ответ на ваш вопрос (на что другие ответили), но если вы хотите иметь некоторые функции редактирования загруженного поля, то вы, вероятно, захотите сделать это:
- показать текущее значение этого поля, просто распечатав имя файла или URL-адрес, ссылку на клик для его загрузки или изображение: просто покажите его, возможно, как миниатюру
- тег
<input>
для загрузки нового файла
- флажок, который при проверке удаляет текущий загруженный файл. обратите внимание, что нет способа загрузить "пустой" файл, поэтому вам нужно что-то вроде этого, чтобы очистить значение поля
Ответ 4
Вы не можете. И это мера безопасности. Представьте, если кто-то пишет JS, который устанавливает значение входного файла в некоторый файл конфиденциальных данных?
Ответ 5
Как заявили все остальные: вы не можете автоматически загружать файл с помощью JavaScript.
ТЕМ НЕ МЕНИЕ! Если у вас есть доступ к информации, которую вы хотите отправить в своем коде (т.е. Не passwords.txt), вы можете загрузить ее как тип blob, а затем обработать ее как файл.
То, что сервер в конечном итоге увидит, будет неотличимым от того, кто действительно устанавливает значение <input type="file"/>
. Трюк, в конечном счете, заключается в том, чтобы начать новый XMLHttpRequest() с сервером...
function uploadFile (data) {
// define data and connections
var blob = new Blob([JSON.stringify(data)]);
var url = URL.createObjectURL(blob);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'myForm.php', true);
// define new form
var formData = new FormData();
formData.append('someUploadIdentifier', blob, 'someFileName.json');
// action after uploading happens
xhr.onload = function(e) {
console.log("File uploading completed!");
};
// do the uploading
console.log("File uploading started!");
xhr.send(formData);
}
// This data/text below is local to the JS script, so we are allowed to send it!
uploadFile({'hello!':'how are you?'});
Ответ 6
1) Проблема значения по умолчанию при вводе файла НЕ "сделана из соображений безопасности", но браузеры "просто не смогли ее реализовать без веской причины": см. этот подробный отчет
2) Простым решением может быть использование текстового ввода поверх ввода файла, как здесь. Конечно, вам нужен код для отправки файла, используя теперь значение в текстовом поле, а не в файле.
В моем случае, если вы работаете с приложением HTA, это не проблема, я вообще не использую форму.
Ответ 7
Определить в html:
<input type="hidden" name="image" id="image"/>
В JS:
ajax.jsonRpc("/consulta/dni", 'call', {'document_number': document_number})
.then(function (data) {
if (data.error){
...;
}
else {
$('#image').val(data.image);
}
})
После:
<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>
Ответ 8
На самом деле мы можем это сделать.
мы можем установить значение файла по умолчанию, используя элемент управления webbrowser в С#, используя библиотеку FormToMultipartPostData. Мы должны загрузить и включить эту библиотеку в наш проект. Webbrowser позволяет пользователю перемещаться по веб-страницам внутри формы.
После загрузки веб-страницы будет выполнен script внутри webBrowser1_DocumentCompleted.
Таким образом,
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
FormToMultipartPostData postData =
new FormToMultipartPostData(webBrowser1, form);
postData.SetFile("fileField", @"C:\windows\win.ini");
postData.Submit();
}
Обратитесь к следующей ссылке для загрузки и полной справки.
https://www.codeproject.com/Articles/28917/Setting-a-file-to-upload-inside-the-WebBrowser-com