文件上传完整实例（限制格式、大小）

先给出代码，后面统一介绍需要引入的js和jar文件，如果有什么问题+QQ“3393055725”

1、HTML代码：

<div id="con">
<img src="${model.filePath}">
</div>
<input type="file" id="fileUpload" value="上传文件">
<input type="hidden" id="filePath" name="filePaht" value="${model.filePath}">

2、js代码：很好用的一个插件

$(function(){
new AjaxUpload('fileUpload',{
action:'...',//后台处理逻辑的URL
name:'fileName',
autoSubmit:'true',
data:{'filePath':$("#filePaht").val()},
responseType:'json',
accept:'image/jpeg,image/png',//只支持两种图片格式，如果写上这个属性，在浏览文件的时候只能选择指定格式的文件，也可以在下面的onSubmit方法中对格式进行限制
onChange:function(file, extension){
//这里处理当文件发生更改时候的操作，一般是将原文件删除，也可以不作处理，在最后直接进行更新操作就行
//如果要做处理的话，使用ajax
var filePath = $("#filePath").val();
$.ajax({
type:'post',
url:'...',
data:{'filePath':filePath},
dataType:'json',
success:function(data){
if(data){
alert("...")
}
}
});
//onChange这部分一般都不需要实现
},
onSubmit:function(file, extension){
//如果前面写了accept参数，onSubmit方法可以不需要实现
if (!(extension && /^(jpg|jpeg|png)/.test(extension))) {//通过正则表达式进行验证
alert("文件格式不正确");
return false;
}
},
//下面这个方法通常都要实现的
onComplete:function(file, response){
//这个方法主要是用来拼接前台dom元素，比如img标签的src属性值
var divCon = '<img src="' + response.fileUrl + '">';
$("#con").html(divCon);
//根据业务需求对dom元素进行更多的操作

},
}
);
});

3、后台代码：

private Logger logger = LoggerFactory.getLogger(getClass());
private FastdfsClientFactory fastdfsClientFactory;
private String fileServerUrl = "http://--.---.-.--:----/";//服务器地址,一般都是通过读取配置文件的方式获取的，这个根据不同的框架使用不同的方式
@RequestMapping("/upload")
@ResponseBody
public FileResult fileUpload(RequestParam("fileName")MultipartFile file) {
FileResult fileResult = new FileResult();
try{
String tempFileName = file.getOriginalFilename();//文件名
String fileExtName = tempFileName.substring(tempFileName.lastIndexOf(".") + 1);//文件扩展名
//判断文件大小
if (file.getBytes().length > 1024L * 1024 * 2) {//2M
fileResult.setResultMsg("文件不能超过2M");
return fileResult;
}
//上传文件
InputStream inputStream = file.getInputStream();
Result<String> result = this.fastdfsClientFactory.getFastdfsClient().upload("",inputStream,file.getSize(),fileExtName,null);
if (result.isSuccess()) {
fileResult.setFileName(tempFileName);
fileResult.setFileUrl(fileServerUrl + result.getData());
} else {
fileResult.setResultMsg("上传失败");
}
}catch(Exception e){
logger.error("上传失败" + e);
fileResult.setResultMsg(e.getMessage());
}
return fileResult;
}

public class FileResult {
private String fileName;
private String fileUrl;
private String resultMsg;
/**
* getter和setter方法
*/
}

4、js和jar文件的引入：

ajaxupload.js文件

fdfsclient-0.0.1.jar文件

slf4j-api-1.7.21.jar文件

资源下载地址：http://download.csdn.net/download/cat_pp/9890867

木有积分的亲们+QQ“3393055725”分享给大家，也可以讨论其他的技术问题

5、扩展内容：

5.1 删除文件方法：

@RequestMapping("/delete")
@ResponseBody
public FileResult fileDelete(String fileId) {
FileResult fileResult = new FileResult();
try{
//如果传参是fileURL，可以使用下面的方法获取fileId
//String fileId = fileUrl.split(fileServerUrl)[1];
Result<Boolean> result = this.fastdfsClientFactory.delete(fileId);
fileResult.setResultMsg("删除成功");
}catch(Exception e) {
logger.error("删除失败" + e);
fileResult.setResultMsg(e.getMessage());
}
return fileResult;
}

5.2 KindEditor文件上传

@RequestMapping("/keUpload")
@ResponseBody
public Map keUpload(@RequestParam("fileName") MultipartFile file) {
Map<String, Object> map = new HashMap<>();
try{
String tempFileName = file.getOriginalFilename();
String fileExtName = tempFileName.substring(tempFileName.lastIndexOf(".") + 1);
InputStream inputStream = file.getInputStream();
Result<String> result = this.fastdfsClientFactory.upload("",inputStream,file.getSize(),fileExtName,null);
map.put("message", "上传成功");
map.put("error", 0);
map.put("url", fileServerUrl + result.getData());
}catch(Exception e) {
map.put("message", "上传失败");
map.put("error", 1);
}
return map;
}