form表单—提交文件到后台 并判断文件大小和类型
前台html代码
<!--第一步:enctype="multipart/form-data"-->
<form id="addForm" enctype="multipart/form-data">
<div>
<label>缩略图:</label> <input type="file" id="file" name="file"
onchange="getFilesize(this)" />
</div>
<!-- 点击保存按钮提交form -->
<input type="submit" value="保存" />
</form>
input 框的id 要定义为file,才能根据id获取的input框的值,判断文件类型
前台js代码
<script>
$("#addForm").validate({
//省略验证
submitHandler : function(form) {//验证成功,就提交表单
/*第2步:用ajaxSubmit方法提交表单*/
$("#addForm").ajaxSubmit({
type : 'post',
url : "area/add" , //变量
error : function() {//请求失败处理函数
alert("失败");
},
success : function(data) { //请求成功后处理函数。
alert("成功");
}
});
}
})
var fileSize = 0; //文件大小默认为0
function getFilesize(file) { //如果上传文件,会触发
/*(1)判断文件后缀类型*/
var strs = new Array(); //定义一数组
// var pic1 = $("#file").val(); //获取input框的值,文件路径
var pic1 = $(file).val(); //获取input框的值,文件路径
strs = pic1.split('.'); //分成数组存储
var suffix = strs[strs.length - 1]; //获取文件后缀
if (suffix != 'jpg' && suffix != 'gif' && suffix != 'jpeg'&& suffix != 'png')
{
alert("您选择的不是图片,请上传一个图片");//不是图片,做处理
}
/*(2)获取文件大小,以Kb为单位*/
fileSize = file.files[0].size / 1024;
if (fileSize > 10000) {
alert("您选择的图片太大,请选择小于10M的图片");
}
}
/* 上传附件的时候,判断附件大小 */
function getFileSize(file) {
var fileSize = file.files[0].size;
if (fileSize > 104857600) {
alert("文件大小不能超过100M,请重新选择文件"); // 提示消息
$(file).val(""); // 清空已选择的文件
}
}
</script>
后台
@RequiresPermissions("device:create")
@RequestMapping(value = "area/add", method = RequestMethod.POST)
public String addDeviceWithFile(@RequestParam(required = false, value = "file") MultipartFile file){
//传了文件,做什么处理
}