HTML/자바 스크립트로 .mp3 파일을 업로드하고 자바 백엔드로 보내는 방법

Question

HTML/자바 스크립트로 작성된 JSP 프론트 엔드에서 노래 (.mp3) 파일을 업로드하려고합니다. 웹 소켓을 사용하여 Java 백엔드에 업로드해야합니다. 누구든지이 일을 어떻게 진행할 수 있을지에 대한 제안이 있습니까?

현재 우리는 우리의 JSP 파일에 이런 일을하고 있습니다 :

<h1>Please Choose a Song file</h1> 
    <form name = "JSONUploadForm"> 
     <input type = "file" name="file" accept = ".mp3"/> <br/> 
     <input type = "button" value = "Click to upload!" name = "button" onClick = "submitSong();"/> 
    </form> 

그런 다음 우리는 우리의 자바 스크립트 함수의 submitSong() 또한

function submitSong(){ 
    var songStuffs = document.getElementById("file"); 
    console.log(songStuffs); --> we get "null" here 
    sendMessage(songStuffs); 
    alert("song sent"); 
} 


function sendMessage(val, string) { 
    socket.send(string); 
    return false; 
} 

이곳 서버 기능에 대한 우리의 연결이다. 그러나이 기능은 올바르게 작동합니다. 어떤 제안을 크게 감상 할 수

@OnMessage 
public void onMessage(String message, Session session) throws IOException, EncodeException { 
     FileWriter fw = new FileWriter(new File(songName + ".mp3")); 
     fw.write(song); 

     BufferedReader fr = new BufferedReader(new FileReader(songName + ".mp3")); 
     String data = fr.readLine(); 

     System.out.println("Song: " + data); --> Here we get "song: null" 
} 

:

function connectToServer() { 
    socket = new 
    WebSocket("ws://localhost:8080/Project/socket"); 
    socket.onopen = function(event) { 
    console.log("connected!"); 
} 

당신은 또한 우리의 서버 측 (된 .java 파일)을 볼 수 있습니다!

Answer 1

오류가

"VAR songStuffs = document.getElementById를 ("파일 ");"

ID없이 파일 입력. 이 작업은 "var songStuffs = document.querySelector ("[name = file] ");"

내가 querySelector을 사용하기 때문에 모 flexeble을 선호하고 정확하게 JQuery와 쿼리 선택기처럼 작동)))

당신은 업로드 파일에 대한 모든 형태의, 필요하지 않습니다. 당신을 위해 유용이 문서 https://www.html5rocks.com/en/tutorials/websockets/basics/, 을 읽어 보시기 바랍니다 (검색 단어 페이지에서 "덩어리")

HTML을

<input id="file" type = "file" name="file" accept = ".mp3"/> 

코드는 파일을 전송해야하는 경우

var fileInput = document.querySelector("#file"); 
fileInput.addEventListener("change",function(){ 
    connection.send(fileInput.files[0]); 
}); 

및 입력란에는 3 가지 변형이 있습니다

1. JSON { "필드 1 ":"값 1 ","FIELD2 ":"값 1 ", "파일 ":"64 기수 "}를 수동으로 실시
2. formdata를 작성하고 일부 웹 양식 물건과 서버에 폼 데이터를 파싱 (예 https://stackoverflow.com/a/47279216/5138198)
3. 먼저 JSON 데이터를 보내고 두 번째로 파일을 보내십시오.

Answer 2

시도해보십시오. 파일을 업로드해야하는 경우 양식에 enctype을 추가해야합니다.

<form enctype="multipart/form-data"> 
     <input type = "file" name="file" id="song" accept = ".mp3"/> 
</form> 

업데이트 :

당신은 당신의 파일을 전송하기 위해 단순히 WebSocketFileTransfer 플러그인을 사용할 수 있습니다. 이 플러그인은 Auth, 진행 상태, 파일/블롭 호환성과 같은 많은 기능을 제공합니다. 코드에서

var songStuffs = document.getElementById("song").files[0]; 
var transfer = new WebSocketFileTransfer({ 
    url: 'ws://ip:port/path/to/upload_web_socket_server', 
    file: songStuffs, 
    progress: function(event) { 
     // Update the progress bar 
    }, 
    success: function(event) { 
     // Do something 
    } 
    }); 

transfer.start();