jquery/python을 사용하여 웹 사이트에 이미지 업로드

Question

방문자가 텍스트를 쓸 수있는 웹 사이트를 만들었습니다 (페이스 북 또는 블로그와 유사 함). 이제 방문자가 이미지를 사이트에 업로드하여 사용자 인터페이스를 추가 할 수 있도록 구현하고 싶습니다. "찾아보기"버튼과 "업로드"버튼.

저는 클라이언트 측에서 javascript/jquery를 사용하고 서버 측에서는 Python을 사용하고 있습니다.

사용자가 찾아보기 단추를 클릭하면 파일을 선택하는 대화 상자가 나타납니다. 그런 다음이 파일을 서버의 지정된 경로에 어떻게 업로드 할 수 있습니까? 클라이언트 쪽 스크립트가 파일을 서버에 일방적으로 업로드 할 수 있습니까, 아니면 파일을 받아들이는 데 필요한 서버 쪽 스크립트입니까?

Answer 1

난 당신이 비동기 때문에이 파일을 업로드하려고하는 것 같아요 :

클라이언트 측 당신이 당신의 HTML 내에서 사용해야 할 파일을 선택하기 위해

:

<input type="file" id="file"> 

을

사용자는이 요소로 파일을 선택할 수 있습니다. 이제 자바 스크립트 부분 :

function upload() { 
    var formData = new FormData(); 
    var target = //Upload-Server URL 
    formData.append("file", document.getElementById("file").files[0]); 
    var xhr = new XMLHttpRequest(); 
    var eventSource = xhr.upload || xhr; 
    eventSource.addEventListener("progress", function(e){ 
     var current = e.loaded || e.position ; 
     var total = e.total || e.totalSize; 
     var percant = parseInt((current/total)*100, 10); 
     // DO whatever you want with progress 
    }); 
    xhr.open("POST", target, true); 
    xhr.send(formData); 
    xhr.onload = function() { 
     if (this.status === 200) 
      // SUCCESS 
    }; 
} 

클라이언트 측

내가 파이썬 서버 측 코딩 경험이 없지만이 http://webpython.codepoint.net/cgi_file_upload 귀하의 경우에 유용 할 수 있습니다. 클라이언트 측에

Answer 2

: 당신은 당신이 사용자가 로컬 파일과 상호 작용할 수 있도록 응용 프로그램을 만들 수있는 HTML5 파일 API를 사용할 수 있습니다. 기본적으로 파일을로드하고 실제로 파일을 업로드 할 필요없이 브라우저에서 렌더링 할 수 있습니다.

 image = self.request.body 
     import uuid 
     unique_filename = str(uuid.uuid4()) 
     fh = open("images/"+unique_filename+".png", "wb") 
     from base64 import decodestring 
     fh.write(decodestring(image)) 
     fh.close() 

: 그런 다음 여기

uploadImage(e){ 
     var reader = new FileReader(); 
     var url; 
     reader.onload = function(event){ 
      url = event.target.result; 
      $('#destination').html("<img src='"+url+"' />"); 

      //save 
      $.ajax('/api/image', { 
       cache: false, 
       method: 'POST', 
       data: {url} 
      }); 
     } 

     //when the file is read it triggers the onload event above. 
     reader.readAsDataURL(e.target.files[0]); 

    } 

서버 측 demo

인 저장 서버 AJAX로 보내