드래그 앤 드롭 파일 업로드

Question

그래서 제가 찾고있는 것을 찾고 그것을 구현하는 방법을 찾기 위해 약간 고심하고 있습니다.

사용자가 업로드 버튼을 누르고 파일을 선택한 다음 JS를 사용하여 변경 사항 (즉, 사용자가 파일을 선택 함)을 확인한 다음 양식을 제출한다는 기본 PHP 파일 업 로더가 작동합니다. 이미지를 잘 업로드합니다.

내가 지금 원하는 것은 드래그 영역 & 드롭 다운 영역입니다. 따라서 사용자는 파일 탐색기에서 이미지를 드래그하여 지정된 위치 (전체 페이지가 아님)에 놓은 다음 해당 이미지가 이미지와 함께 자동으로 제출되고 동일한 PHP 처리를 사용하도록 양식이 삭제 된 후에 드롭 할 수 있습니다.

이것이 현실적입니까?

Answer 1

제 3 자 플러그인을 사용하지 않고서도 이것은 사실적이며 가능합니다.

function processFileUpload(droppedFiles) { 
     // add your files to the regular upload form 
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped 
     for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped 
      uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files 
     } 
    } 

// the final ajax call 

     $.ajax({ 
     url : "upload.php", // use your target 
     type : "POST", 
     data : uploadFormData, 
     cache : false, 
     contentType : false, 
     processData : false, 
     success : function(ret) { 
       // callback function 
     } 
     }); 

} 

: - 방법

드롭 영역

$(".drop-files-container").bind("drop", function(e) { 
    var files = e.originalEvent.dataTransfer.files; 
    processFileUpload(files); 
    // forward the file object to your ajax upload method 
    return false; 
}); 

processFileUpload() :

다음 조각은 당신이 일할 수있는 방법에 대한 아이디어를 줄 것이다 양식 예시

시작 지점으로 자유롭게 사용하십시오. 이것의 브라우저 지원은 내가이 플러그인 센을했습니다 여기 http://caniuse.com/#feat=xhr2 당신이 진행 표시 줄, 미리보기, 애니메이션과 같은 원하는 엑스트라를 추가 할 수 있습니다 물론

...

Answer 2

이 jQuery 플러그인을 확인하십시오! jQuery를 여러 파일 선택과 http://blueimp.github.com/jQuery-File-Upload/

파일 업로드 위젯, 드래그 & 드롭 지원, 진행률 표시 줄 및 미리보기 이미지 : 아약스 파일 업로드 및 기타 기능을 사용할 수 있습니다. 교차 도메인 청크 및 재개 가능 파일 업로드 및 클라이언트 측 이미지 크기 조정을 지원합니다. 표준 HTML 양식 파일 업로드를 지원하는 서버 측 플랫폼 (PHP, Python, Ruby on Rails, Java, Node.js, Go 등)과 함께 작동합니다.