ajax를 사용하여 cherrypy 서버에 파일 업로드

Question

cherrypy 서버에 파일을 업로드하려고하지만 표시된 페이지는 변경하지 않고 파일을 업로드하려고합니다. 사용자에게 업로드가 완료되었음을 알리는 간단한 경고가 충분합니다.

나는 간단한 파일 입력 유형과 버튼이 노력하고 있습니다 : 버튼 클릭에 대한

<div> 
    <label>Upload Sound:</label> 
    <input id="pathSound" style="width: 80%" type="file" accept=".mp3"/><br> 
    <button id="uploadSound">Upload</button> 
</div> 

및 스크립트 :

$("#uploadSound").click(function(e) { 
    if (document.getElementById("pathSound").value=='') { 
     alert("No file selected!"); 
     e.preventDefault(); 
     return; 
    } 
    var cardID = $('#tagID').html(); 
    var file = document.getElementById("pathSound").files[0]; 
    alert("Tag: " + cardID + " File: " + file); 

    $.post("/uploadSound", {"cardID": cardID, "myFile": file}) 
    .done(function(res) { 
     alert("File Saved!"); 
    }); 
}); 

내가 지금까지이 기능을 서버 측에서 하지만 결코 호출되지 않습니다 :

import os, os.path 
import cherrypy 
from cherrypy.process import plugins 

class MagicBoxInterface(object): 

    @cherrypy.expose 
    def index(self): 
     return file('index.html') 

    @cherrypy.expose 
    def uploadSound(self, cardID='', myFile=None): 
     print 'uploadSound : ', cardID 
     print 'uploadSound : ', myFile 
     return '' 

if __name__ == '__main__': 
    conf = { 
     '/': { 
      'tools.sessions.on': True, 
      'tools.staticdir.root': os.path.abspath(os.getcwd()) 
     }, 
     '/static': { 
      'tools.staticdir.on': True, 
      'tools.staticdir.dir': './public' 
     } 
    } 
    interface = MagicBoxInterface() 
    cherrypy.quickstart(interface, '/', conf) 

모든 예제는 정상적인 게시물을 사용하고 t 다음에 결과 페이지를 표시합니다. 그는 업로드하지만 이것은 내가하고 싶은 것이 아닙니다! 표시된 페이지는 변경하면 안됩니다.

1 ~ 2MB 미만의 파일 만 처리하므로 큰 파일은 고려하지 않아도됩니다.

프레임을 사용하여 몇 가지 예제를 발견했지만 HTML/자바 스크립트에 익숙하지 않아서 필자의 요구에 어떻게 적용 할 수 있는지 완전히 이해하지 못했습니다.

간단한 해결책에 도움을 주시면 대단히 감사하겠습니다. 확인이 작업을 수행

Answer 1

...

$("#uploadSound").click(function(e) { 
    if (document.getElementById("pathSound").value=='') { 
     alert("No file selected!"); 
     e.preventDefault(); 
     return; 
    } 
    var cardID = $('#tagID').html(); 
    var file = document.getElementById("pathSound").files[0]; 
    alert("Tag: " + cardID + " File: " + file); 

    $.post("/MagicBoxInterface/uploadSound", {"cardID": cardID, "myFile": file}) 
    .done(function(res) { 
     alert("File Saved!"); 
    }); 
}); 

당신은 당신의 POST 요청 경로에 클래스를 포함해야합니다. 도움이되기를 바랍니다.