Как установить значение для ввода файла в 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