HTML5 자바 스크립트 POST 파일 업로드

Question

최근에 간단한 HTML5 드래그 앤 드롭을 이미 간단한 PHP 파일 업로드 스크립트에 추가하려고합니다. 튜토리얼 및 기타 솔루션을 많이 읽었지만 전체 파일을 서버 부분으로 보내는 것을 이해할 수없는 것 같습니다. 내가 이해 한 바로는 XMLHttpRequest가 데이터를 보내지 만 페이지를 다시로드하지 않고도이를 수행합니다. 이것은, 나는 원하지 않는다. 현재 사용중인 스크립트는 POST 데이터를 가져 와서 파일 업로드 출력을 생성합니다 (예 : 서버 다운로드 링크, 이미지의 경우 미리보기 이미지 등

드래그 앤 드롭으로 POST 데이터를 제출하고 업로드 출력에 액세스하거나 페이지를 다시로드하려면 어떻게해야합니까?

편집 : 나는 드래그 앤 드롭에 대해 다음을 사용하고 :

<div id="drop_zone">Drag and drop a file here</div> 

    <script> 
      function handleFileSelect(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 

      var files = evt.dataTransfer.files; // FileList object. 


      uploadFile(files[0]); //<-- This is where most examples will use XMLHttpRequest to construct form and send data 
      } 

     function handleDragOver(evt) { 
      evt.stopPropagation(); 
      evt.preventDefault(); 
      document.getElementById('drop_zone').style.backgroundColor = "#faffa3"; 
      evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
     } 
     function handleDragLeave(evt) { 
      document.getElementById('drop_zone').style.backgroundColor = ""; 
     } 

      // Setup the dnd listeners. 
      var dropZone = document.getElementById('drop_zone'); 
      dropZone.addEventListener('dragover', handleDragOver, false); 
      dropZone.addEventListener('drop', handleFileSelect, false); 
      dropZone.addEventListener('dragleave', handleDragLeave, false);     
    </script> 

Answer 1

더 읽기와 주변 검색 후 나는 내가 원래 싶어하는 것은 할 수 없다는 결론에 도달했습니다.

내가 해결할 해결책은 놓기 영역을 덮는 큰 투명/숨김 <input type="file">을 간단히 갖도록하는 것입니다. 드롭 된 파일 이름은 입력 된 자바 스크립트에서 읽고 드롭 존에 표시됩니다. 이것은 물론 HTML 파일 입력으로 파일을 드래그 앤 드롭 할 수 있도록 브라우저에 의존합니다. 내 업로드 스크립트는 사용자가 보이는 파일 선택기를 사용하는 것처럼 거의 작동합니다.

내가 원한 것에 너무 명확하지 않은 것에 대해 사과드립니다. 나는 나 자신을 그렇게 확신하지 못했다. 답장/의견에 감사드립니다.

Answer 2

당신은 JQuery와 또는를 사용하는 경우 다른 이벤트를 지원하는 당신이 끌기 이벤트를 잡을 제출 할 수 있어야합니다 자바 스크립트 라이브러리하여 형태.

http://docs.jquery.com/UI/API/1.8/Draggable

http://api.jquery.com/on/

그러나 반군 XMLHttpRequest를

...