情景需求:客户端上传txt文本文件后,读取其中的内容插入到服务器中
一、前端代码
/**
* 网页部分
*/
<div>
txt文件导入敏感词 : <input type="file" name="file" multiple id="fileId" />
<button name="btn" id="btnId" onclick="return addWord()">提交</button>
</div>
/**
* js部分
*/
function addWord() {
var objFile = document.getElementById("fileId");
if(objFile.value == "") {
alert("txt不能空")
return false;
}
var files = $('#fileId').prop('files'); //获取到文件列表
console.log(files.length);
if(files.length == 0 || files.length > 1) {
alert('请选择一个文件');
return false;
} else {
for(var i = 0; f = files[i]; i++) {
var reader = new FileReader(); //新建一个FileReader
reader.readAsText(files[i], "UTF-8"); //读取文件
reader.onload = function(evt) { //读取完文件之后会回来这里
var fileString = evt.target.result; // 读取文件内容
$.ajax({
url: 'filter/addTxt',
type: 'post',
data: {fileString:fileString},
dataType: 'json',
success: function(data){
alert(data.msg);
location.reload();
},
error: function(){
alert('服务器开小差了,请稍后再试');
}
})
}
}
return false;
}
}
二、服务器部分
/**
* txt导入敏感词
* @param fileString
* @return
*/
@RequestMapping("/addTxt")
@ResponseBody
public Map<String,Object> addTxt(String fileString){
HashMap<String, Object> map = new HashMap<>();
if(fileString == null || fileString.equals("")){
map.put("msg","导入失败,文件错误");
return map;
}
String[] strings = fileString.split("\n");
for(String s: strings){
SensitiveWord sensitiveWord = new SensitiveWord();
sensitiveWord.setWord(s);
sensitiveWord.setStatus(0);
sensitiveService.insert(sensitiveWord);
}
map.put("msg","导入成功");
return map;
}