如何上传文件。HTML/Javascript格式的mp3文件并发送到Java后端

Question

我们正在尝试从用HTML/Javascript编写的JSP前端上传歌曲（.mp3）文件。我们需要使用WebSocket上传到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>

然后我们有了javascript函数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;
}

另外，这里是我们的连接到服务器功能。但是，这项功能正常

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

您还可以看到我们的服务器端（.java文件）：

@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"
}

如有任何建议，将不胜感激

Answer 1

代码中有一个错误

"var songStuffs = document.getElementById("file");"

没有id的文件输入。 这将在“var songsuffs=document.querySelector（“[name=file]”）中起作用

我更喜欢使用querySelector，因为它非常灵活，工作方式与jquery查询选择器完全相同。）

上传文件不需要任何表格。 请阅读这篇文章https://www.html5rocks.com/en/tutorials/websockets/basics/， 这对你很有用（在页面上搜索单词“blob”）

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{“field1”：“value1”，“field2”：“value1”， “文件”：“base64”}
2. 手动创建表单数据并在 服务器和一些网络表单（例如 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插件即可发送文件。这个插件有很多功能，比如身份验证、进度状态、文件/blob兼容性

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();