วิธีการตั้งค่าเป็นไฟล์อินพุตใน HTML?

ฉันจะตั้งค่าของสิ่งนี้ได้อย่างไร

<input type="file" />

คุณไม่สามารถทำได้เนื่องจากเหตุผลด้านความปลอดภัย

Imagine:

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

คุณไม่ต้องการให้เว็บไซต์ที่คุณเยี่ยมชมสามารถทำเช่นนี้ได้ใช่ไหม =)

คุณทำไม่ได้

วิธีเดียวในการตั้งค่าของอินพุตไฟล์คือผู้ใช้เลือกไฟล์

นี่คือเหตุผลด้านความปลอดภัย มิฉะนั้นคุณจะสามารถสร้าง JavaScript ที่อัปโหลดไฟล์เฉพาะจากคอมพิวเตอร์ของลูกค้าโดยอัตโนมัติ

ไม่ใช่คำตอบสำหรับคำถามของคุณ (ซึ่งคนอื่นตอบแล้ว) แต่ถ้าคุณต้องการมีฟังก์ชั่นการแก้ไขบางอย่างของฟิลด์ไฟล์ที่อัปโหลดสิ่งที่คุณอาจต้องการทำคือ:

• แสดงค่าปัจจุบันของฟิลด์นี้โดยเพียงพิมพ์ชื่อไฟล์หรือ URL ลิงก์ที่คลิกได้เพื่อดาวน์โหลดหรือถ้าเป็นภาพ: เพียงแค่แสดงมันอาจเป็นภาพขนาดย่อ
• <input>แท็กอัปโหลดไฟล์ใหม่
• ช่องทำเครื่องหมายที่เมื่อทำเครื่องหมายจะลบไฟล์ที่อัปโหลดในปัจจุบัน โปรดทราบว่าไม่มีวิธีการอัปโหลดไฟล์ "ว่างเปล่า" ดังนั้นคุณต้องมีสิ่งนี้เพื่อล้างค่าของฟิลด์

คุณทำไม่ได้ และเป็นมาตรการรักษาความปลอดภัย ลองนึกภาพว่ามีคนเขียน JS ที่กำหนดค่าอินพุตไฟล์ลงในไฟล์ข้อมูลที่ละเอียดอ่อนหรือไม่

ตามที่คนอื่น ๆ ได้ระบุไว้: คุณไม่สามารถอัปโหลดไฟล์โดยอัตโนมัติด้วย JavaScript

อย่างไรก็ตาม! หากคุณมีสิทธิ์เข้าถึงข้อมูลที่คุณต้องการส่งในรหัสของคุณ (เช่นไม่ใช่รหัสผ่าน.txt) คุณสามารถอัปโหลดเป็นแบบblob -type จากนั้นถือว่าเป็นไฟล์

<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เป็นของ jpg วิธีนี้ช่วยให้ผู้ใช้ไม่ต้องกังวลกับการเปิดfile inputองค์ประกอบเพียงเพื่อเลือกโลคัลรูปภาพแคชที่พวกเขาเพิ่งปรับขนาดแก้ไข ฯลฯ แต่มันควรจะทำงานกับไฟล์ประเภทใดก็ได้

1) ปัญหาค่าเริ่มต้นในอินพุตไฟล์ไม่ได้ "ทำเพื่อเหตุผลด้านความปลอดภัย" แต่เบราว์เซอร์ "ไม่สามารถใช้งานได้เพราะไม่มีเหตุผลที่ดี": ดูรายงานที่ลึกซึ้งนี้

2) วิธีการแก้ปัญหาที่ง่ายสามารถที่จะใช้ป้อนข้อความที่ด้านบนของการป้อนข้อมูลไฟล์เหมือนที่นี่ แน่นอนว่าคุณต้องใช้รหัสในการส่งไฟล์โดยใช้ตอนนี้ค่าในการป้อนข้อความไม่ใช่อินพุตไฟล์

ในกรณีของฉันทำแอปพลิเคชัน HTA ซึ่งไม่ใช่ปัญหาฉันไม่ได้ใช้แบบฟอร์มเลย

กำหนดเป็น 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>

ที่จริงเราสามารถทำได้ เราสามารถตั้งค่าเริ่มต้นค่าไฟล์โดยใช้การควบคุมเว็บเบราว์เซอร์ใน c # โดยใช้ FormToMultipartPostData Library เราต้องดาวน์โหลดและรวมไลบรารี่นี้ไว้ในโครงการของเรา เว็บเบราเซอร์ช่วยให้ผู้ใช้สามารถนำทางเว็บเพจภายในฟอร์ม เมื่อโหลดหน้าเว็บสคริปต์ภายใน 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