gpt4 book ai didi

javascript - 将音频文件上传到服务器并根据服务器响应设置图像

转载 作者:行者123 更新时间:2023-11-28 01:13:38 25 4
gpt4 key购买 nike

我需要将音频文件上传到服务器并显示来自服务器响应的图像。我是 java 脚本和 ajax 的新手。我正在尝试将音频文件从输入标签获取到 ajax 调用,但它返回非法调用。我需要将音频文件上传到 java web 服务,它以文件格式返回图像,因此需要将此图像文件显示为预览。有什么办法吗?提前致谢

<body>
<form role="form" id="serviceReq" method="post"
enctype="multipart/form-data">
Upload File : <input type="file" name="audio"
id="audioFile" title="Upload File">
<button>Submit</button>
</form>
<div>
<!-- set Response image from server -->
<img alt="" id="preImage" src="">
</div>

服务.request.js

$(function() {
var formName = "#serviceReq";
$(formName)
.on(
'submit',
function(e) {
var documentData = new FormData();
documentData.append('audio', $("#audioFile").prop(
'files')[0]);
e.preventDefault();
$.support.cors = true;
$
.ajax({
url : 'http://192.168.2.11:8082/SoundWaveService/audioWave/addAudioNew',
method : 'POST',
crossDomain : true,
contentType : 'multipart/form-data',
dataType : 'script',
data : documentData,
beforeSend : function() {
},
success : function(data) {
/**
* set images to #preImage from server
* response
*/
},
error : function(e) {
alert(e);
}
});
});});

我在java中的服务方法

@Path("/addAudioNew")
@POST
@Produces(MediaType.APPLICATION_OCTET_STREAM)
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response insertAudioWaveNew(@FormDataParam("audio") InputStream audioFile) throws Exception {
File response = null;
response = fetchService.insertAudioNew(audioFile);
return Response.ok(response, MediaType.APPLICATION_OCTET_STREAM)
.header("Content-Disposition", "attachement; filename=\"" + response.getName() + "\"").build();
}

最佳答案

请试试这个:

$(function() {
var formName = "#serviceReq";
$(formName).on('submit', function(e) {
e.preventDefault();

var documentData = new FormData();
documentData.append('audio', $("#audioFile")[0].files[0]);
$.support.cors = true;

$.ajax({
url : 'http://192.168.2.11:8082/SoundWaveService/audioWave/addAudioNew',
method : 'POST',
crossDomain : true,
contentType : 'multipart/form-data',
processData: false, //New
data : documentData,
beforeSend : function() { },
success : function(data) {
/**
* set images to #preImage from server
* response
*/
},
error : function(e) {
alert(e);
}
});
});
});

如果您使用跨域 ajax 请求,您的服务器必须将 Access-Control-Allow-Origin: * 添加到响应 header 。

关于javascript - 将音频文件上传到服务器并根据服务器响应设置图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36645402/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com