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