html5 파일 드래그 앤 드롭 - 전체 양식 제출시 업로드

Question

양식 제출에 "drag and drop'd"파일을 포함시킬 수 있습니까? 비동기 적으로 업로드 할 수있는 옵션이 많이 있습니다.

파일 데이터를 캡처하여 양식 필드에 포함시킬 수 있습니까? 내가 그렇게 이상적 이미지의 데이터가 같은 형태에 딱 맞는 내 서버로 레일을 사용하고

은 다음과 같습니다

<form multipart='multipart' > 
    <select name='files[type_id]'> 
    ... 
    ... 
    </select> 
    <!-- FILE DATA ? --> 
    <div id="file_drop_spot"> 

    </div> 

</form> 

Answer 1

내가 그것을에서이 문제를 발견 drag drop files into standard html file input

그렇게하지 그것이 가능하다고 믿지만 그 효과를 얻을 수 있습니다. 양식을 제출하면 기본 동작을 방지하고 ajax로 파일 업로드를 시작합니다. 파일 업로드가 완료되면 기본 동작을 방해하지 않고 양식을 다시 가리켜 제출하십시오.

뭔가 같은 : 다음

<form id="form"> 
    <input type="text" name="someText"></input> 
    <input id="submitButton" type="submit" onclick="uploadFile()"></input> 
</form> 

그리고 자바 스크립트 :

function uploadFile() { 

    document.getElementById("submitButton").disabled = true; 
    // Some ajax code to upload the file and then on the success: 
    success: function() { 

     document.getElementById("form").submit(); 

    } 
    return false; // Prevent the form from submitting 

}