Bagaimana cara menetapkan nilai ke input file dalam HTML?

Jawaban:

525

Anda tidak bisa, karena alasan keamanan.

Membayangkan:

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

Anda tidak ingin situs web yang Anda kunjungi dapat melakukan ini, bukan? =)

BalusC
sumber
Bisakah Anda membersihkannya? Itu mengganggu saya bahwa nama file diingat setiap kali saya mengunjungi kembali. Pelase lihat stackoverflow.com/questions/41807471/…
Mawg mengatakan mengembalikan Monica
1
Saya memahami masalah keamanan, tetapi tidakkah browser dapat membedakan antara filepath lokal yang berbahaya dan sesuatu yang lebih tidak berbahaya seperti dataUrl? Mungkin itu hanya mimpi.
cowlinator
5
Bagaimana dengan fungsi drag n drop, tidak ada cara untuk mengatur file itu ke kolom input?
Vedmant
1
@ Vedmant Ya Anda dapat mengatur nilai elemen file dengan peristiwa seret / lepas pada elemen lainnya. Lihat Cara mengatur nilai input file secara program (yaitu: saat menyeret file)?
Samuel Liew
129

Kamu tidak bisa

Satu-satunya cara untuk menetapkan nilai input file adalah oleh pengguna untuk memilih file.

Ini dilakukan untuk alasan keamanan. Kalau tidak, Anda akan dapat membuat JavaScript yang secara otomatis mengunggah file tertentu dari komputer klien.

Guffa
sumber
51

Bukan jawaban untuk pertanyaan Anda (yang dijawab orang lain), tetapi jika Anda ingin memiliki beberapa fungsi edit bidang file yang diunggah, yang mungkin ingin Anda lakukan adalah:

  • perlihatkan nilai saat ini dari bidang ini dengan hanya mencetak nama file atau URL, tautan yang dapat diklik untuk mengunduhnya, atau jika itu adalah gambar: cukup tampilkan, mungkin sebagai thumbnail
  • yang <input>tag untuk meng-upload file baru
  • kotak centang yang, ketika dicentang, menghapus file yang diunggah saat ini. perhatikan bahwa tidak ada cara untuk mengunggah file 'kosong', jadi Anda perlu sesuatu seperti ini untuk menghapus nilai bidang
Wim
sumber
1
Saya pikir inilah yang saya butuhkan. Jika saya ingin mengedit informasi produk (tidak ingin mengubah gambar produk), bagaimana saya harus mengatur <input type="file" />ke gambar produk yang ada? Saya dapat menampilkan gambar yang ada dalam <img />tag tetapi ketika saya mengirimkan file tidak lewat.
Partho63
37

Kamu tidak bisa Dan itu adalah langkah pengamanan. Bayangkan jika seseorang menulis JS yang menetapkan nilai input file ke beberapa file data sensitif?

Eimantas
sumber
10

Seperti yang dinyatakan oleh semua orang di sini: Anda tidak dapat mengunggah file secara otomatis dengan JavaScript.

NAMUN! Jika Anda memiliki akses ke informasi yang ingin Anda kirim dalam kode Anda (yaitu, bukan passwords.txt), maka Anda dapat mengunggahnya sebagai gumpalan -jenis, dan kemudian memperlakukannya sebagai file.

Apa yang akhirnya dilihat oleh server tidak dapat dibedakan dari seseorang yang benar-benar menetapkan nilai <input type="file" />. Caranya, pada akhirnya, adalah memulai XMLHttpRequest () baru dengan server ...

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

Jadi, untuk apa Anda bisa menggunakan ini? Saya menggunakannya untuk mengunggah elemen kanvas HTML5 sebagai jpg. Ini menghemat pengguna dari keharusan untuk membuka file inputelemen, hanya untuk memilih gambar lokal, dalam cache yang baru saja mereka ubah ukurannya, dimodifikasi, dll. Tapi itu harus bekerja untuk semua jenis file.

HoldOffHunger
sumber
1

1) Masalah nilai default dalam input file TIDAK "dilakukan karena alasan keamanan", tetapi browser "gagal untuk mengimplementasikannya, tanpa alasan yang baik": lihat laporan mendalam ini

2) Solusi sederhana dapat menggunakan input teks di atas input file, seperti di sini . Tentu saja Anda memerlukan beberapa kode untuk mengirim file, sekarang menggunakan nilai input teks dan bukan input file.

Dalam kasus saya, melakukan aplikasi HTA, itu bukan masalah, saya tidak menggunakan formulir sama sekali.

msillano
sumber
-4

Tentukan dalam html:

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

Di JS:

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

Setelah:

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

Sebenarnya kita bisa melakukannya. kita dapat menetapkan nilai file default dengan menggunakan kontrol webbrowser di c # menggunakan FormToMultipartPostData Library. Kita harus mengunduh dan memasukkan Library ini ke dalam proyek kita. Webbrowser memungkinkan pengguna untuk menavigasi halaman Web di dalam formulir. Setelah halaman web dimuat, skrip di dalam webBrowser1_DocumentCompleted akan dieksekusi. Begitu,

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

Lihat tautan di bawah ini untuk mengunduh dan melengkapi referensi.

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

uma
sumber
3
Untuk apa bahasa ini? Itu bukan javascript.
John