SSM利用接口的方式上传文件,js调用接口上传文件,ajax利用接口上传文件

需要引用ssm上传文件的工具包

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>

编写接口的需要的引用的上传文件类

public class UploadPictureUtil {

public  static  String addMutiparFile(MultipartFile file) throws IOException{
System.out.println("上传的文件"+file);
if (file.isEmpty()){
return null;
}else {
// 判断上传的文件是否为空
String path=null;// 文件路径
String type=null;// 文件类型
String fileName=file.getOriginalFilename();// 文件原名称
System.out.println("上传的文件原名称:"+fileName);
String contentType = file.getContentType();
String originalFileName = file.getOriginalFilename();
String fileSuffix = originalFileName.substring(originalFileName.lastIndexOf("."));
// 判断文件类型
type=fileName.indexOf(".")!=-1?fileName.substring(fileName.lastIndexOf(".")+1, fileName.length()):null;
//获取图片全路径
String realPath ="/var/zzs/";
String urlPrefix ="http://localhost:8080/";
System.out.println(realPath);
String pathAppend = "upload/images"+"/" + Calendar.getInstance().get(Calendar.YEAR) + "/" + (Calendar.getInstance().get(Calendar.MONTH)+1) + "/" + Calendar.getInstance().get(Calendar.DAY_OF_MONTH) + "/";
realPath = realPath + pathAppend;
File dir = new File(realPath);
if (dir.exists()) {// 判断目录是否存在
System.out.println("创建目录失败，目标目录已存在！");
}else {
dir.mkdirs();
}

String newFileName = new Date().getTime() + "" + new Random().nextInt();
// 设置存放图片文件的路径
path=realPath+newFileName+fileSuffix;
System.out.println("存放图片文件的路径:"+path);
// 转存文件到指定的路径
file.transferTo(new File(path));
System.out.println("文件成功上传到指定目录下");
return urlPrefix+pathAppend+newFileName+fileSuffix;

}

}
}

编写上传文件的接口

@RequestMapping(value="/updategrade.do")
public @ResponseBody Object updategrade(MultipartFile file, HttpServletRequest request,String appid,@RequestParam  Map<String,Object> map) throws  IOException {
String campain_image= UploadPictureUtil.addMutiparFile(file);
Map result=new HashMap();
map.put("update_time",new Date());
map.put("down_url",campain_image);
try {
int a =settingService.updategrade(map);
if(a>0){
map.put("notify_time",new Date());
int b=settingService.insertgradelog(map);
if(b>0){
result.put("success",true);
}else{
result.put("success",false);
}
}
result.put("success",true);
}catch (Exception e){
e.printStackTrace();
result.put("success",false);
}
return  result;
}

html页面代码

<form class="form form-horizontal" action=""  method="post"  id="form-article-add">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">序号：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" style="border:none;width: 200px;"  value="${grademessage.app_id}"   readonly="true" id="app_id" name="app_id">
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>应用版本号：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text"  style="width: 150px;" value="${grademessage.app_version}"  id="app_version"  name="app_version">
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>code：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" style="width: 50px;" value="${grademessage.app_code}"  id="app_code"  name="app_code">
</div>
<label class="form-label col-xs-4 col-sm-2">系统：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text"  style="border:none;width: 200px;" value="${grademessage.app_system}" readonly="true" id="app_system" name="app_system">
</div>
<br/>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>更新内容：</label>
<div class="formControls col-xs-8 col-sm-9">
<textarea  style="width: 500px;height: 150px;" style="border:none" id="upgrade_content"  name="upgrade_content">${grademessage.upgrade_content}</textarea>
<%--<input type="text" class="input-text"  value="${grademessage.upgrade_content}"  id="upgrade_content">--%>
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>下载地址：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text"  style="width: 500px;" value="${grademessage.down_url}"  readonly="true" >
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>文件上传：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="file" class="input-text"  style="width: 200px;" id="file" name="file">
</div>
<label class="form-label col-xs-4 col-sm-2">更新时间：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text"  style="border:none;width: 200px;" value="${grademessage.update_time}" readonly="true" >
</div>
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>发布状态：</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="radio"  style="border:none"  value="0" <c:if test="${grademessage.status==0}">checked</c:if> name="status">未发布
<input type="radio"  style="border:none"  value="1" <c:if test="${grademessage.status==1}">checked</c:if> name="status">已发布
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
<button onclick="report_save_submit()" class="btn btn-primary radius" type="button"><i class="Hui-iconfont"></i> 保存</button>
<%--<button  class="btn btn-primary radius" type="submit"><i class="Hui-iconfont"></i> 保存</button>--%>
<button onClick="layer_close();" class="btn btn-default radius" type="button">  取消  </button>
</div>
</div>
</form>

js代码，此处需要注意的是ajax里面contentType,async,processData都为false否则会报错

function report_save_submit() {
if ($('#file').val() == null || $('#file').val() == '') {
alert('请选择文件上传');
} else {
var formData = new FormData($("#form-article-add")[0]);
$.ajax({
url: '此处为接口地址',
type: 'POST',
data: formData,
async: false,
contentType: false,
processData: false,
success: function (data) {
if (data.success) {
layer.msg('修改成功', {time: 2000, icon: 6});
window.parent.location.reload();
layer.full(index)
} else {
layer.msg('修改失败', {time: 2000, icon: 6});
}
},
error: function (data) {
}
});
}
}