Question

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

试试这个，如果你必须上传文件，你应该在表格中添加enctype。

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

<强>更新

您只需使用WebSocketFileTransfer插件即可发送文件。此插件有助于实现许多功能，如Auth，进度状态，文件/ 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();

Answer 2

在您的代码中出现错误

＆＃34; var songStuffs = document.getElementById（＆＃34; file＆＃34;）;＆＃34;

您的文件输入没有ID。这将工作＆＃34; var songStuffs = document.querySelector（＆＃34; [name = file]＆＃34;）;＆＃34;

我更喜欢使用querySelector，因为它可以像jquery查询选择器一样灵活运行）））

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

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种变体

创建JSON {＆＃34; field1＆＃34;：＆＃34; value1＆＃34;，＆＃34; field2＆＃34;：＆＃34; value1＆＃34;，＆＃34; file＆＃34;：＆＃34; base64＆＃34;}
手动创建formdata并解析表单数据服务器与一些webform的东西（例如 https://stackoverflow.com/a/47279216/5138198）
首先发送JSON 数据，其次是发送文件

如何在HTML / Javascript中上传.mp3文件并发送到Java后端

2 个答案: