HTML 5 드래그 앤 드롭으로 입력 파일

Question

이것이 가능한지 전혀 모르겠다. 아무것도 찾을 수없는 것 같습니다.

내가 원하는 것은 이미지를 "끌어 놓기"또는 일반 html 파일 입력 상자를 사용할 수있는 옵션을 사용자에게 제공하는 것입니다.

양식을 저장할 때까지 업로드 할 이미지가 아닙니다. 그래서 드래그 앤 드롭 영역에서 필드를 업데이트하겠습니까?

어떻게해야할까요?

미리 감사드립니다.

Answer 1

아니요. 수행 할 수 없습니다. 삭제 된 파일은 AJAX를 통해서만 업로드 할 수 있습니다.

일반적인 HTML 형식으로 파일을 업로드하는 유일한 방법은 <input type="file">이며 파일 입력은 읽기 전용입니다.

Answer 2

나는 여기에 같은 대답을 찾고왔다. 귀하의 필요에 맞게 보이는 다음을 수행하십시오.

이미지 드롭 상자에 div를 만든 다음 div에 입력 유형 = "파일"을 추가하십시오. 높이와 너비를 원하는대로 설정하십시오. 불투명도를 0으로 설정하십시오. 이제 입력이 div를 채우고 볼 수 없지만 여전히 기능합니다.

<Style> 
.divClass{ 
    position: relative; 
    // anything else 
} 
.inputClass{ 
    opacity: 0; 
    position: absolute; 
    top:0; 
    left: 0; 
    height: x // as desired 
    width: x // as desired 
} 
</style> 

=== 편집 ===

아래

<div class="divClass"> 
    <input class="inputClass" name="inputName" type="file"> 
</div> 

스타일은 정말 그냥 = 입력 유형과 양식을 사용하여 파일이 필요합니다, 거기 내 스타일을 무시합니다. 필요에 따라 스타일/레이아웃.

Shazoo가 지적한대로 IE에서 이미지 끌어서 놓기 기능이 작동하지 않습니다. Firefox 및 Chrome에서 작동합니다. 오페라와 사파리에 대한 확신이 없습니다. 보안상의 이유로 입력 유형 = 파일에 JavaScript를 사용할 수 없습니다. Jasny가 말한대로 읽기 전용이므로 브라우저 공급 업체가 허용하는 것에 의존해야합니다.

IE 사용자에게 필드를 클릭하여 파일을 선택하고 업로드 할 수있는 옵션을 제공 할 수 있습니다. IE의 기본 입력 유형 = "파일"은이 기능을 제공하므로 입력을 볼 수있는 한 볼 수 있어야합니다. (기본 에지 입력 타입 = 파일) (https://stackoverflow.com/a/31757969/3136874 기준) IE의 예

필터

function stopIeDefault(){ 
    window.addEventListener("dragover",function(e){ 
    e = e || event; 
    e.preventDefault(); 
    },false); 
    window.addEventListener("drop",function(e){ 
    e = e || event; 
    e.preventDefault(); 
    },false); 
} 
if (/MSIE 10/i.test(navigator.userAgent)) { 
    // This is internet explorer 10 
    stopIeDefault() 
} 

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) { 
    // This is internet explorer 9 or 11 
    stopIeDefault() 
} 

if (/Edge\/\d./i.test(navigator.userAgent)){ 
    // This is Microsoft Edge 
    stopIeDefault() 
} 

IE 및 에지에 대한 이러한 테스트. 버전을 발견하면 stopIeDefault를 사용하여 드래그 앤 드롭에 대한 기본값을 방지합니다. 누군가가 드래그하여 폼에 떨어 뜨리면 IE가 이미지를로드하지 못하게합니다. (Edge는 기본적으로이를 방지하기 위해 나처럼 stopIeDefault를 호출 할 필요가 없습니다.) 또한 다른 스타일을 적용하거나 IE 블록을 추가하거나 코드 블록을 추가 할 수 있습니다. w3schools에 따르면 2016 년 8 월 현재 IE 브라우저 공유는 5.2-6.2 %입니다. http://www.w3schools.com/browsers/default.asp이 무엇인지 결정하는 데 도움이된다면.

드래그 앤 드롭이 사파리 또는 오페라에서 작동하는지 확인할 수있는 사람은 누구나 가능합니다. === 편집 ===