HTML에서 파일 입력에 값을 설정하는 방법은 무엇입니까?

HTML에서 파일 입력에 값을 설정하는 방법은 무엇입니까?

---

노트 :

아래의 답변 및 의견은 2009 년 레거시 브라우저의 상태를 반영합니다. 이제 2017 년 JavaScript 및 dataTransfer 또는 FileList 객체를 사용하여 파일 입력 요소의 값을 동적 / 프로그램 적으로 설정할 수 있습니다.

자세한 내용과 데모 : 프로그래밍 방식으로 파일 입력 값을 설정하는 방법 (예 : 파일을 끌어다 놓을 때) 에 대해서는이 질문의 답변을 참조하십시오
.

이 값을 어떻게 설정할 수 있습니까?

<input type="file" />

---

보안상의 이유로 인해서는 안됩니다.

상상해보십시오.

<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로 파일을 자동으로 업로드 할 수 없습니다.

하나! 암호로 전송하려는 정보 (예 : passwords.txt가 아님)에 액세스 할 수 있으면 해당 정보를 Blob 유형 으로 업로드 한 다음 파일로 취급 할 수 있습니다.

서버가 보게 될 것은 실제로 값을 설정하는 사람과 구별 할 수 없습니다 <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?'});

---

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

참고 URL : https://stackoverflow.com/questions/1696877/how-to-set-a-value-to-a-file-input-in-html