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

JAVASCRIPT / 글쓴이

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

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

그렇다면 무엇을 사용할 수 있습니까? 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>