HTML
<form id="form" onsubmit="return false" enctype="multipart/form-data">
<div class="form-group form-inline">
<input class="form-control " id="ipt_file" disabled>
<span class="form-control " onclick="$('#ipt_file_hidden').click()" style="cursor: pointer">选择文件</span>
<input type="file" accept="audio/*" id="ipt_file_hidden" name="file" onchange="$('#ipt_file').val($('#ipt_file_hidden').val())" style="display: none" />
</div>
<div class="input-group">
<button type="button" class="btn btn-default" onclick="save()">提交</button>
<!--进度条-->
<div class="progress" style="margin-top: 10px">
<div class="progress-bar" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
<span class="sr-only">40% 完成</span>
</div>
</div>
</div>
</form>
js
import jquery.form.js
<script >
function save(){
$('#form').ajaxSubmit({
beforeSubmit:function(){
if ($('#ipt_file').val()==''){
alert("file为空")
return false;
}else {
}
},
type:'post',
url:'/system/upload',
dataType:'json',
success:function (res) {
alert(res.msg)
},
error:function (res) {
alert(JSON.stringify(res))
}
})
}
</script>
springmvc
controller:
@RequestMapping
public void upload(HttpServletResponse res, @RequestParam(value = "file")MultipartFile file) throws IOException {
printOK(res,systemService.upload(file));
}
service:
public String upload(MultipartFile file) {
try {
file.transferTo(new File("D:\\data\\"+file.getOriginalFilename()));
} catch (IOException e) {
e.printStackTrace();
return e.getMessage();
}
return "上传成功!";
}