Jak ustawić wartość dla pliku wejściowego w HTML?


Odpowiedzi:


525

Nie możesz, ze względów bezpieczeństwa.

Wyobrażać sobie:

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

Nie chcesz, aby odwiedzane witryny mogły to robić, prawda? =)


Czy potrafisz to wyczyścić? Wkurza mnie to, że nazwa pliku jest zapamiętywana przy każdej wizycie. Pelase patrz stackoverflow.com/questions/41807471/…
— Mawg mówi, że przywróć Monikę

1
Rozumiem problem z bezpieczeństwem, ale czy przeglądarka nie powinna być w stanie odróżnić niebezpiecznej lokalnej ścieżki do pliku od czegoś bardziej nieszkodliwego jak dataUrl? Może to marzenie z fajki.
— cowlinator

5
Co z funkcją przeciągania i upuszczania, nie ma możliwości ustawienia tego pliku na pole wejściowe?
— Vedmant,

1
@ Vedmant Tak, możesz ustawić wartość elementu pliku za pomocą zdarzenia przeciągnij / upuść na innych elementach. Zobacz Jak programowo ustawić wartość wejściową pliku (np. Podczas przeciągania plików)?
— Samuel Liew

129

Nie możesz

Jedynym sposobem ustawienia wartości pliku wejściowego jest wybranie pliku przez użytkownika.

Odbywa się to ze względów bezpieczeństwa. W przeciwnym razie można utworzyć JavaScript, który automatycznie przesyła określony plik z komputera klienta.


51

Nie jest to odpowiedź na twoje pytanie (na które inni odpowiedzieli), ale jeśli chcesz mieć możliwość edycji przesłanego pola pliku, prawdopodobnie chcesz:

  • pokaż aktualną wartość tego pola, po prostu drukując nazwę pliku lub adres URL, klikalny link, aby go pobrać, lub jeśli jest to obraz: po prostu pokaż go, być może jako miniaturę
  • <input>tag załadować nowy plik
  • pole wyboru, które po zaznaczeniu usuwa aktualnie przesłany plik. pamiętaj, że nie ma sposobu na przesłanie „pustego” pliku, więc potrzebujesz czegoś takiego, aby wyczyścić wartość pola

1
Myślę, że tego właśnie potrzebuję. Jeśli chcę edytować informacje o produkcie (nie chcę zmieniać obrazu produktu), jak ustawić <input type="file" />istniejący obraz produktu? Mogę wyświetlić istniejący obraz w <img />tagu, ale po przesłaniu plik nie przechodzi.
— Partho63

37

Nie możesz I to jest środek bezpieczeństwa. Wyobraź sobie, że ktoś zapisuje plik JS, który ustawia wartość wejściową pliku w pliku wrażliwych danych?


10

Jak wszyscy tutaj stwierdzili: Nie można automatycznie przesłać pliku za pomocą JavaScript.

JEDNAK! Jeśli masz dostęp do informacji, które chcesz wysłać w swoim kodzie (tj. Nie passwords.txt), możesz przesłać je jako typ obiektu blob , a następnie traktować jako plik.

To, co zobaczy serwer, będzie nie do odróżnienia od kogoś, kto faktycznie ustawia wartość <input type="file" />. Ostateczną sztuczką jest rozpoczęcie nowego XMLHttpRequest () na serwerze ...

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

Więc do czego możesz tego użyć? Używam go do przesyłania elementów płótna HTML5 jako plików jpg. Oszczędza to użytkownikowi konieczności otwierania file inputelementu, tylko w celu wybrania lokalnego, buforowanego obrazu, którego rozmiar właśnie zmieniono, zmodyfikowano itp. Ale powinien on działać z dowolnym typem pliku.


1

1) Problem wartości domyślnej w pliku wejściowym NIE JEST „zrobiony ze względów bezpieczeństwa”, ale przeglądarki „po prostu nie wdrożyły go, bez uzasadnionego powodu”: zobacz ten szczegółowy raport

2) Prostym rozwiązaniem może być użycie wprowadzania tekstu na górze pliku, tak jak tutaj . Oczywiście potrzebujesz kodu, aby wysłać plik, używając teraz wartości do wprowadzania tekstu, a nie do wprowadzania pliku.

W moim przypadku robienie aplikacji HTA nie stanowi problemu, w ogóle nie używam formularza.


-4

Zdefiniuj w html:

<input type="hidden" name="image" id="image"/>

W JS:

ajax.jsonRpc("/consulta/dni", 'call', {'document_number': document_number})
    .then(function (data) {
        if (data.error){
            ...;
        }
        else {
            $('#image').val(data.image);
        }
    })

Po:

<input type="hidden" name="image" id="image" value="/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8U..."/>
<button type="submit">Submit</button>

-8

Właściwie możemy to zrobić. możemy ustawić wartość domyślną pliku za pomocą kontrolki przeglądarki internetowej w języku c # przy użyciu biblioteki FormToMultipartPostData. Musimy pobrać i uwzględnić tę bibliotekę w naszym projekcie. Przeglądarka internetowa pozwala użytkownikowi poruszać się po stronach internetowych w formularzu. Po załadowaniu strony internetowej skrypt w webBrowser1_DocumentCompleted zostanie wykonany. Więc,

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
    {
       FormToMultipartPostData postData = 
            new FormToMultipartPostData(webBrowser1, form);
        postData.SetFile("fileField", @"C:\windows\win.ini");
        postData.Submit();
    }

Pobierz poniższy link, aby pobrać i uzyskać pełne odniesienie.

https://www.codeproject.com/Articles/28917/Setting-a-file-to-upload-inside-the-WebBrowser-com


3
Dla jakiego to języka? To nie jest javascript.
— John
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.