Spring + Ajax 同时传输文本和文件

需求：上传docx文件，输入待替换的人名、地名或组织名，然后在后端执行替换，再异步返回给前端下载

直接将文件和文本拼接赋给data属性测试失败

Html：

<div id="page2" class="col s12" style="margin-top: 5%;margin-bottom: 5%">
    <form action="#" name="fileForm" id="selectFile" enctype="multipart/form-data">
        <div class="file-field input-field" style="margin: 5% auto; text-align: center;width: 50%">
            <div class="waves-effect waves-light btn z-depth-2 light-blue darken-3">
                <span>选择文件</span>
                <input id="fileChooser" accept=".docx,application/msword" name="file" type="file">
            </div>
            <div class="input-field" style="margin-left: 50px">
                <input class="file-path validate" type="text">
            </div>
        </div>
    </form>
    <div class="file-field input-field" style="margin: 5% auto; text-align: center;">
        <span>
        替换选项：
        </span>
        <span>
            <input type="checkbox" class="filled-in" id="PER" checked/>
            <label for="PER">人名</label>
            <input id="newPER" type="text" style="width:20%">
        </span>
        <span>
            <input type="checkbox" class="filled-in" id="LOC" />
            <label for="LOC">地名</label>
            <input id="newLOC" type="text" style="width:20%">
        </span>
        <span>
            <input type="checkbox" class="filled-in" id="ORG" />
            <label for="ORG">组织名</label>
            <input id="newORG" type="text" style="width:20%">
        </span>
    </div>
    <div class="input-field" style="margin: 5% auto; text-align: center">
        <button type="submit" id="submit-btn2" class="waves-effect waves-light btn z-depth-2 light-blue darken-3">提交</button>
    </div>
</div>

主要就是把form的enctype属性设置为 multipart/formdata ，然后设置action="#" 以便使用ajax发送请求

js：

$("#submit-btn2").click(function() {
    var selectedFile=new FormData($('#selectFile')[0]);
    var newPER=$("#newPER").val();
    var newLOC=$("#newLOC").val();
    var newORG=$("#newORG").val();
    selectedFile.append("newPER",newPER);
    selectedFile.append("newLOC",newLOC);
    selectedFile.append("newORG",newORG);
    $.ajax({
        type: 'post',
        url: '/uploadFile',
        cache: false,
        async: true,
        data: selectedFile,
        processData:false,
        contentType:false,
        beforeSend: function () {
            ……
        },
        error:function (){
            ……
        },
        success: function (result) {
            ……
        }
    });
});

首先将整个form包裹进FormData对象中，然后获取文本框中的值，使用append方法也包装进FormData对象，将整个对象赋给data属性

后台：

@PostMapping("/uploadFile")
public WebAsyncTask<String> upload(@RequestParam(value="file") MultipartFile file,@RequestParam(value="choice") int choice,@RequestParam(value="newPER") String newPER,@RequestParam(value="newLOC") String newLOC,@RequestParam(value="newORG") String newORG){
    //把上传的文件保存到本地
    File newFile=new File(System.getProperty("user.dir")+"/upload/"+file.getOriginalFilename());
    file.transferTo(newFile);
    ……
}

之后对newFile操作即可

由于文件处理是耗时操作，于是使用WebAsyncTask异步返回结果，接受一个Callable<T>对象

ajax的success处可以根据返回值进行后续处理，比如我这里返回一个字符串，如果处理过程中抛出异常，则返回"error"；否则返回"修改-原始文件名"，用来作为下载文件时的参数：

success: function (result) {
    $('#processing').hide();
    if(result=="error"){
        $('#funcTabs').show();
        alert('文件处理失败！请检查文件格式或网络。')
    }else {
        $('#processFinished').show();
        document.getElementById('processedFile').value = result
    }
}

Spring + Ajax 同时传输文本和文件

猜你喜欢