Question

我尝试使用socketio-file-upload上传文件，到目前为止它完成了相当好的工作，选择＆＃34;上传图片＆＃34;按钮正确上传文件到我喜欢的文件夹。我的问题是任何点击＆＃34;搜索文件＆＃34;或＆＃34; ClickHere＆＃34;上传文件时没有给出您选择的文件的名称。我想要实现的是

1.-按＆＃34;上传图片＆＃34;按钮
2.-显示文件名
3.-通过单击按钮＆＃34; ClickHere＆＃34;将文件上传到所选文件夹。这是我正在使用的代码

main.js

//Connection to the socket library
const socket = io();

//This is some classic socket.io event listening
socket.on('data', data => {
    console.log(data);
});
//Here is our socketio-file-upload code
const uploader = new SocketIOFileUpload(socket);

//uploader.listenOnInput(document.getElementById('fileUpload'));
uploader.listenOnInput(document.getElementById('fileUpload'));


uploader.addEventListener('start', (event)=> {
    event.file.meta.extension = 'csv';
});

document.getElementById('file_button').addEventListener('click', uploader.prompt, false);

Answer 1

来自Socket.IO File Upload documentation：

instance.listenOnSubmit（submitButton，input）

与instance.listenOnInput(input)类似，除了不在输入元素上侦听“change”事件之外，请监听按钮的“click”事件。

JavaScript的：
instance.listenOnSubmit(document.getElementById("my_button"), document.getElementById("file_input"));
HTML：
<label>Upload File: <input type="file" id="file_input" /></label>
<button id="my_button">Upload File</button>

尝试这样的事情：

main.js

//Connection to the socket library
const socket = io();

//This is some classic socket.io event listening
socket.on('data', data => {
    console.log(data);
});
//Here is our socketio-file-upload code
const uploader = new SocketIOFileUpload(socket);

// When #file_button is clicked, the file in #fileUpload is uploaded.
uploader.listenOnSubmit(document.getElementById('file_button'), document.getElementById('fileUpload'));

uploader.addEventListener('start', (event)=> {
    event.file.meta.extension = 'csv';
});

使用socketio-file-upload上传图片

1 个答案: