需求:上传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对象

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

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

———————————————— 版权声明:本文为CSDN博主「hbyangland」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/u010670411/article/details/83623148