将音频文件上传到服务器并从服务器响应中设置图像答案

【问题标题】：Upload Audio file to server and set images from server response将音频文件上传到服务器并从服务器响应中设置图像
【发布时间】：2016-08-07 07:45:58
【问题描述】：

我需要将音频文件上传到服务器并显示来自服务器响应的图像。我是 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>

service.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();
}

【问题讨论】：

标签： javascript java html ajax jakarta-ee

【解决方案1】：

请试试这个：

$(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: * 添加到响应标头中。

【讨论】：