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

337

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

<input type="file" />
Алон Губкин
источник
3
Я сделал полный и актуальный (декабрь 2013 г.) ответ об этом здесь: запоминать и
повторно заполнять

Ответы:

525

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

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

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

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

BalusC
источник
Вы можете это очистить? Меня беспокоит, что имя файла запоминается при каждом повторном посещении. Pelase см stackoverflow.com/questions/41807471/...
Mawg говорит Моника восстановило
1
Я понимаю проблему безопасности, но должен ли браузер различать опасный локальный путь к файлу и что-то более безобидное, например, dataUrl? Может быть, это несбыточная мечта.
cowlinator
5
Как насчет функции перетаскивания, нет способа установить этот файл в поле ввода?
Ведмант
1
@Vedmant Да, вы можете установить значение элемента файла с помощью события перетаскивания на другие элементы. См. Как установить значение входного файла программно (например, при перетаскивании файлов)?
Самуэль Лью
129

Ты не можешь

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

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

Guffa
источник
51

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

  • показать текущее значение этого поля, просто напечатав имя файла или URL, кликабельную ссылку, чтобы загрузить его, или, если это изображение: просто показать его, возможно, в виде эскиза
  • <input>тег , чтобы загрузить новый файл
  • флажок, который, когда установлен, удаляет загруженный в данный момент файл. обратите внимание, что нет способа загрузить «пустой» файл, поэтому вам нужно что-то вроде этого, чтобы очистить значение поля
Wim
источник
1
Я думаю, что это то, что мне нужно. Если я хочу редактировать информацию о продукте (не хочу менять изображение продукта), как мне установить <input type="file" />существующее изображение продукта? Я могу показать существующее изображение в <img />теге, но когда я отправляю, файл не проходит.
Partho63
37

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

Eimantas
источник
10

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

Итак, что вы могли бы использовать это для? Я использую его для загрузки HTML5-элементов canvas как jpg. Это избавляет пользователя от необходимости открывать file inputэлемент только для выбора локального кэшированного изображения, размер которого он только что изменил, изменил и т. Д. Но он должен работать для любого типа файла.

HoldOffHunger
источник
1

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

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

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

msillano
источник
-4

Определить в 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>
djperalta
источник
-8

На самом деле мы можем сделать это. мы можем установить значение файла по умолчанию, используя элемент управления webbrowser в c # с помощью библиотеки FormToMultipartPostData. Мы должны загрузить и включить эту библиотеку в наш проект. Веб-браузер позволяет пользователю перемещаться по веб-страницам внутри формы. После загрузки веб-страницы будет выполнен скрипт внутри 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

Ума
источник
3
На каком языке это? Это не JavaScript
Джон