드래그 앤 드롭 후 서버에 이미지를 업로드하는 방법

전체 끌어서 놓기가 작동하지만 서버에 업로드하는 방법 ??? 일부 base64 인코딩 인 이미지의 dataURL을 얻을 수 있습니다. 이것을 내 서블릿에 업로드하는 방법이 있으며 서블릿은 이것을 어떻게 받아 들일 것입니까? This tutorial이 도움이되었지만 업로드 부분이 누락되었습니다. 필자는 커스터마이징 된 것처럼 보이는 다른 JQuery 플러그인을 보았습니다.드래그 앤 드롭 후 서버에 이미지를 업로드하는 방법

출처

2012-07-31 Tejen Shrestha

이미지의 원래 위치는 어디입니까? –

@Diodeus 사용자 데스크톱에서. –

그래서 사용자가 이미 이미지를 서버에 업로드하지 않았다면 어떻게 이미지를 사용하고 있습니까? –

후 ... :-)

내가하지 재발 바퀴의 큰 옹호 해요 ... 별도의 js 파일입니다 더 많은 검색을하면 JavaScript의 FormData 개체를 사용하여 파일을 제출하는 것이 매우 쉽다는 것을 알게되었습니다. 드래그 앤 드롭 API의 어느 부분에서 dataTransfer.files의 이미지 파일을받은 후 다음 코드를 사용하여 이미지 파일을 서버로 보낼 수 있습니다.

// Create formdata object 
var formData = new FormData; 
// Append form item (key, value) 
formData.append('file', imageFile); 

// JQuery ajax call to submit the file using post request 
$.ajax({ 
    url: 'url_of_server_script', 
    data: formData, 
    processData: false, 
    contentType: false, 
    type: 'POST', 
    success: function(data){ 
     alert(data); 
    } 
});

출처

2012-07-31 23:08:49

하나의 옵션은이를 사용하는 것입니다 : 그것은 UI와 함께 않지만

는

http://www.plupload.com/

, 그것은 또한 당신이 프로그래밍 방식으로 서버에 파일을 보낼 수 있었다 JS 라이브러리와 함께 제공됩니다. 불필요한 JS 귀하의 웹 사이트를 복잡하게 할 필요가 없습니다 있도록 UI 및 프로그램 부분은

출처

2012-07-31 18:37:42 Scot

그래, 내 프로젝트에도 plupload를 사용하고있다. 또한 브라우저가 드래그/드롭을 위해 HTML5를 지원하지 않는 경우 정상적으로 성능이 저하되는 것을 좋아합니다. 다른 점이 있다면, 스스로 알고 싶으면 plupload 코드를보고 어떻게 처리하는지 확인하십시오. – AceCorban

드래그 앤 드롭 후 서버에 이미지를 업로드하는 방법

답변

관련 문제