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.