Làm cách nào để đặt giá trị cho đầu vào tệp trong HTML?

Ghi chú:

Các câu trả lời và nhận xét bên dưới phản ánh trạng thái của các trình duyệt cũ trong năm 2009. Bây giờ bạn thực sự có thể đặt giá trị của phần tử đầu vào tệp một cách linh hoạt / lập trình bằng cách sử dụng JavaScript và đối tượng dataTransfer hoặc FileList trong năm 2017.

Xem câu trả lời trong câu hỏi này để biết chi tiết cũng như bản demo:
Làm cách nào để đặt giá trị đầu vào tệp theo chương trình (nghĩa là: khi kéo thả tệp)?

Làm thế nào tôi có thể thiết lập giá trị này?

<input type="file" />

Bạn không thể vì lý do bảo mật.

Hãy tưởng tượng:

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

Bạn không muốn các trang web bạn truy cập để có thể làm điều này, phải không? =)

Bạn không thể.

Cách duy nhất để đặt giá trị của đầu vào tệp là người dùng chọn tệp.

Điều này được thực hiện vì lý do bảo mật. Nếu không, bạn có thể tạo một Javascript tự động tải lên một tệp cụ thể từ máy khách.

Không phải là một câu trả lời cho câu hỏi của bạn (mà những người khác đã trả lời), nhưng nếu bạn muốn có một số chức năng chỉnh sửa của trường tệp được tải lên, điều bạn có thể muốn làm là:

• hiển thị giá trị hiện tại của trường này bằng cách chỉ in tên tệp hoặc URL, liên kết có thể nhấp để tải xuống hoặc nếu đó là hình ảnh: chỉ hiển thị nó, có thể là hình thu nhỏ
• các <input>thẻ để tải lên một tập tin mới
• một hộp kiểm mà khi được chọn sẽ xóa tệp đang tải lên. lưu ý rằng không có cách nào để tải lên tệp 'trống', vì vậy bạn cần một cái gì đó như thế này để xóa giá trị của trường

Bạn không thể. Và đó là một biện pháp bảo mật. Hãy tưởng tượng nếu ai đó viết một JS đặt giá trị đầu vào tệp vào một số tệp dữ liệu nhạy cảm?

Như mọi người khác ở đây đã tuyên bố: Bạn không thể tải lên tệp tự động bằng JavaScript.

TUY NHIÊN! Nếu bạn có quyền truy cập vào thông tin bạn muốn gửi trong mã của mình (nghĩa là không phải mật khẩu.txt), thì bạn có thể tải nó dưới dạng blob -type, sau đó coi nó như một tệp.

Những gì máy chủ sẽ nhìn thấy sẽ không thể phân biệt được với một người thực sự thiết lập giá trị của <input type="file" />. Cuối cùng, mẹo là bắt đầu một XMLHttpRequest () mới với máy chủ ...

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

Vì vậy, những gì bạn có thể có thể sử dụng này để làm gì? Tôi sử dụng nó để tải lên các yếu tố canvas HTML5 dưới dạng jpg. Điều này giúp người dùng tránh được sự cố khi phải mở một file inputphần tử, chỉ để chọn hình ảnh cục bộ, được lưu trong bộ nhớ cache mà họ vừa thay đổi kích thước, sửa đổi, v.v. Nhưng nó sẽ hoạt động với mọi loại tệp.

1) Vấn đề về giá trị mặc định trong đầu vào tệp KHÔNG "được thực hiện vì lý do bảo mật", nhưng các trình duyệt "không thực hiện được, không có lý do chính đáng": xem báo cáo sâu này

2) Một giải pháp đơn giản có thể là sử dụng một kiểu nhập văn bản trên đầu vào của tệp, như ở đây . Tất nhiên bạn cần một số mã để gửi tệp, bây giờ sử dụng giá trị trong nhập văn bản chứ không phải nhập tệp.

Trong trường hợp của tôi, làm ứng dụng HTA, đó không phải là vấn đề, tôi hoàn toàn không sử dụng biểu mẫu.

Xác định trong html:

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

Trong JS:

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

Sau:

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

Thật ra chúng ta có thể làm được. chúng tôi có thể đặt giá trị tệp mặc định bằng cách sử dụng điều khiển webbrowser trong c # bằng Thư viện FormToMultipartPostData. Chúng tôi phải tải xuống và đưa Thư viện này vào dự án của chúng tôi. Webbrowser cho phép người dùng điều hướng các trang Web bên trong biểu mẫu. Khi trang web được tải, tập lệnh bên trong webBrowser1_DocumentCompleted sẽ được thực thi. Vì thế,

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

Tham khảo liên kết dưới đây để tải về và tham khảo đầy đủ.

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