it-roy-ru.com

Как установить значение для файла ввода в HTML?

Заметка:

Приведенные ниже ответы и комментарии отражают состояние устаревших браузеров в 2009 году. Теперь вы можете фактически установить значение элемента ввода файла динамически/программно, используя JavaScript и объект dataTransfer или FileList в 2017 году.

Подробности см. В ответе на этот вопрос, а также в демоверсии:
Как установить значение входного файла программно (т.е. при перетаскивании файлов)?

Как я могу установить значение этого?

<input type="file" />
268
Alon Gubkin

Вы не можете по соображениям безопасности.

Представить:

<form name="foo" method="post" enctype="multipart/form-data">
    <input type="file" value="c:/passwords.txt">
</form>
<script>document.foo.submit();</script>

Вы не хотите, чтобы посещаемые вами сайты могли это делать? знак равно

447
BalusC

Ты не можешь.

Единственный способ установить значение входного файла - пользователь может выбрать файл.

Это сделано из соображений безопасности. В противном случае вы сможете создать Javascript, который автоматически загружает определенный файл с клиентского компьютера.

114
Guffa

Не ответ на ваш вопрос (на который ответили другие), но если вы хотите иметь некоторую функциональность редактирования поля загруженного файла, то вы, вероятно, захотите сделать следующее:

  • показать текущее значение этого поля, просто напечатав имя файла или URL, кликабельную ссылку, чтобы загрузить его, или, если это изображение: просто показать его, возможно, в виде эскиза
  • тег <input> для загрузки нового файла
  • флажок, который, когда установлен, удаляет загруженный в данный момент файл. обратите внимание, что нет способа загрузить «пустой» файл, поэтому вам нужно что-то вроде этого, чтобы очистить значение поля
47
Wim

Ты не можешь И это мера безопасности. Представьте себе, если кто-то пишет JS, который устанавливает входное значение файла в некоторый файл конфиденциальных данных?

32
Eimantas

Как все остальные здесь заявили: Вы не можете автоматически загружать файл с помощью 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?'});
0
HoldOffHunger

1) Проблема значения по умолчанию при вводе файла IS НЕ «выполнена из соображений безопасности», но браузеры «просто не смогли ее реализовать без веской причины»: см. Этот подробный отчет

2) Простым решением может быть использование текстового ввода поверх файла ввода, как здесь . Конечно, вам нужен код для отправки файла, используя теперь значение при вводе текста, а не ввод файла.

В моем случае, если вы работаете с приложением HTA, это не проблема, я вообще не использую форму.

С наилучшими пожеланиями M.s.

0
msillano