페이지에 파일을 드롭할 때 파일 입력 값을 설정하는 방법은 무엇입니까?
양식에 제출할 파일을 선택하고 파일을 드롭하여 동일한 작업을 수행할 수 있는 컨트롤을 만들려고 합니다.이미지인 경우 파일 미리보기를 보여주는 다음과 같은 기능이 있습니다.
<div class="preview-image-container">
<input type="file" name="File" id="File" accept="image/*"
class="image-url form-control" style="display:none;" />
<div class="preview-image-dummy"></div><img class="preview-image-url" />
<div class="preview-image-instruction">
<div class="preview-image-btn-browse btn btn-primary">Select file</div>
<p>or drop it here.</p>
</div>
</div>
MCVE에 대한 연주를 들어보겠습니다.
사용자가 파일을 삭제합니다.preview-image-container. 파일이 AJAX와 함께 제출되지 않아 사용자는 더 많은 데이터가 포함된 양식을 제출해야 합니다.
보안상의 이유로 자바스크립트로 입력 파일의 값을 변경할 수 없습니다.하지만 기본 입력 파일이 드롭 가능을 지원하고 파일을 양식에 저장하여 선택할 수 있는 웹 사이트가 많이 있다는 것을 알고 있기 때문에 방법이 있을 것 같습니다.
MCVE에서 볼 수 있듯이, 저는 별도의 라이브러리 없이 jQuery나 순수 자바스크립트만 사용하는 것에 관심이 있습니다.
dropzone.js를 사용할 수는 있지만 제 요구사항에 맞지 않고 모양을 커스터마이징하는 데 상당한 시간이 걸릴 것입니다.또한 dropzone.js에는 내 ASP 내에서 충족할 수 없는 특정 구성 요구 사항이 있습니다.NET 적용.
비슷한 질문이 있지만 적절한 대답이 없습니다.
HTML의 형태로 파일 객체를 입력 파일로 설정하는 방법은?
또한 이미 드래그 드롭 및 미리보기 작업을 완료했기 때문에 업로드 전에 드래그 드롭 이미지 입력 파일 및 미리보기와 유사하지 않습니다.제 질문은 상위 컨테이너에 파일을 떨어뜨릴 때 빈 파일 입력이 발생하는 문제입니다.
면책 사항:2017년 12월 현재 최신 브라우저에 한해 수정.
TL;DR: 네, 이제 가능합니다!
*데이터 전송 또는 파일 목록 개체가 있는 경우
이전에 프로그래밍 방식으로 파일 변경input[type=file]최신 브라우저에서 수정되는 레거시 보안 취약성으로 인해 필드가 비활성화되었습니다.
최근 주요 브라우저 중 마지막(Firefox)에서는 입력 파일 필드의 파일을 설정할 수 있습니다.W3C가 실시한 테스트에 의하면, 여러분은 이미 구글 크롬에서 이것을 할 수 있는 것 같습니다!
MDN에서 인용한 관련 스크린샷 및 텍스트:
를 설정할 수 있을 뿐만 아니라 다음과 같은 값을 얻을 수 있습니다.
HTMLInputElement.files모든 최신 브라우저에서
소스 및 브라우저 호환성, MDN 참조
Firefox 버그 수정 토론 스레드에는 테스트할 수 있는 데모가 있으며, 편집하려면 여기 소스가 있습니다.이 링크가 삭제된 경우를 대비하여 다음과 같이 실행 가능한 토막글로 추가합니다.
let target = document.documentElement;
let body = document.body;
let fileInput = document.querySelector('input');
target.addEventListener('dragover', (e) => {
e.preventDefault();
body.classList.add('dragging');
});
target.addEventListener('dragleave', () => {
body.classList.remove('dragging');
});
target.addEventListener('drop', (e) => {
e.preventDefault();
body.classList.remove('dragging');
fileInput.files = e.dataTransfer.files;
});body {
font-family: Roboto, sans-serif;
}
body.dragging::before {
content: "Drop the file(s) anywhere on this page";
position: fixed;
left: 0; width: 100%;
top: 0; height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
background-color: rgba(255, 255, 0, .3);
pointer-events: none;
}
button, input {
font-family: inherit;
}
a {
color: blue;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
<title>JS Bin</title>
</head>
<body>
<h1>Drag and drop files into file input</h1>
<p><small>Supported in <a href="https://github.com/whatwg/html/issues/2861">WebKit and Blink</a>. To test, drag and drop one or more files from your operating system onto this page.</small></p>
<p>
<input type="file">
</p>
</body>
</html>참고 사항:
이 작업은 기존 시스템이 있는 경우에만 수행할 수 있습니다.
FileList오어dataTransfersetter 메서드에서 일반 텍스트 문자열을 허용하지 않으므로 입력 파일 요소에 설정할 수 있는 개체입니다.자세한 정보는 여기서 Kaiido의 답변을 참조하십시오.파일이 FormData 객체에도 반영되는 FileList 객체에서 File 객체와 length 속성을 설정하는 방법?
이제 원래 질문에 답하려면 다음과 같이 간단해야 합니다.
document.querySelector('.preview-image-instruction')
.addEventListener('drop', (ev) => {
ev.preventDefault();
document.querySelector('.image-url').files = ev.dataTransfer.files;
});
언급URL : https://stackoverflow.com/questions/47515232/how-to-set-file-input-value-when-dropping-file-on-page
'programing' 카테고리의 다른 글
| CakePHP에서 도메인 매핑 (0) | 2023.10.25 |
|---|---|
| CSS 인쇄:페이지 간의 절반씩 잘라내는 DIV를 피합니까? (0) | 2023.10.25 |
| Android 완전히 투명한 상태 표시줄? (0) | 2023.10.25 |
| SQL 값이 없을 때도 행 유지 (0) | 2023.10.25 |
| MSVC에 대한 __attribute__(형식(printf, 1, 2))? (0) | 2023.10.25 |