<script type="text/javascript" src="${APP_PATH}/static/bootstrap-fileinput/fileinput.min.js"></script>
<script type="text/javascript" src="${APP_PATH}/static/bootstrap-fileinput/locales/zh.js"></script>
<link href="${APP_PATH}/static/bootstrap-fileinput/fileinput.min.css" rel="stylesheet" />
html:
<form action="news/addnews.action" method="POST" id="addnew_form">
<input type="text" name="head" >
<input type="file" name="newpic" class="myfile"/>
<input type="text" name="body">
<button type="submit" >推送</button>
</form>
js写法:
$(".myfile").fileinput({
uploadUrl:"${APP_PATH}/news/uploadFile", //接受请求地址
uploadAsync : true, //默认异步上传
showUpload : false, //是否显示上传按钮,跟随文本框的那个
showRemove : false, //显示移除按钮,跟随文本框的那个
showCaption : true,//是否显示标题,就是那个文本框
showPreview : true, //是否显示预览,不写默认为true
dropZoneEnabled : false,//是否显示拖拽区域,默认不写为true,但是会占用很大区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount : 1, //表示允许同时上传的最大文件个数
enctype : ‘multipart/form-data‘,
validateInitialCount : true,
previewFileIcon : "<i class=‘glyphicon glyphicon-king‘></i>",
msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
allowedFileTypes : [ ‘image‘ ],//配置允许文件上传的类型
allowedPreviewTypes : [ ‘image‘ ],//配置所有的被预览文件类型
allowedPreviewMimeTypes : [ ‘jpg‘, ‘png‘, ‘gif‘ ],//控制被预览的所有mime类型
language : ‘zh‘
})
//异步上传返回结果处理
$(‘.myfile‘).on(‘fileerror‘, function(event, data, msg) {
console.log("fileerror");
console.log(data);
});
//异步上传返回结果处理
$(".myfile").on("fileuploaded", function(event, data, previewId, index) {
console.log("fileuploaded");
var ref = $(this).attr("data-ref");
$("input[name=‘" + ref + "‘]").val(data.response.url);
});
//上传前
$(‘.myfile‘).on(‘filepreupload‘, function(event, data, previewId, index) {
console.log("filepreupload");
});
@RequestMapping("news/uploadFile")
public String uploadFile(MultipartFile newpic)
throws IllegalStateException, IOException {
// 原始图片名称
String oldFileName = newpic.getOriginalFilename(); // 获取上传文件的原名
// 存储路径
String saveFilePath = "D://新建文件夹 (4)//house//src//main//webapp//housepic";
// 新的图片名称
String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
// 新图片
File newFile = new File(saveFilePath + "\\" + newFileName);
// 将内存中的数据写入磁盘
newpic.transferTo(newFile);
// 将路径名存入全局变量mynewpic
mynewpic = "./housepic/"+newFileName;
}