Bootstrap fileinput的图片上传 java框架基于springMVC

Bootstrap fileinput下载地址

js引入

<!--引入js  -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--引入bootstrap -->
<script src="${ctx}/static/common/bootstrap/js/${bootsVersion}.js"></script>
<script
src="${ctx}/static/common/bootstrap-fileinpu/js/fileinput.min.js"
type="text/javascript"></script>
<script src="${ctx}/static/common/bootstrap-fileinpu/js/locales/zh.js"
type="text/javascript"></script>

css引入

<link
href="${ctx}/static/common/bootstrap-fileinpu/css/fileinput.min.css"
rel="stylesheet">
<!--引入bootstrap -->
<link href="${ctx}/static/common/bootstrap/css/${bootsVersion}.css"
rel="stylesheet">
<link href="${ctx}/static/common/bootstrap/css/bootstrap-theme.min.css"
rel="stylesheet">

HTML

<div class="form-group">
<label for="" class="col-sm-2 control-label">个人头像</label>
<div class="col-sm-10">
<input id="myFile" type="file" name="myFile" class="fileloading">
</div>
<input type="hidden" name="user.logo" id="logo">
</div>

js

$("#myFile").fileinput({
language : 'zh',
uploadUrl : "${ctx}/admin/uplode/photo",
autoReplace : true,
maxFileCount : 1,
allowedFileExtensions : [ "jpg", "png", "gif" ],
browseClass : "btn btn-primary", //按钮样式
previewFileIcon : "<i class='glyphicon glyphicon-king'></i>"
}).on("fileuploaded", function(e, data) {
var res = data.response;
alert(res.success);
$("#logo").attr("value", res.success);
})

后端代码基于springmvc

/**
* 上传图片公共Controller
* @author 瘸子
* @qq 1026290752
*
*/
@Controller
public class UpdatePhonoController {

@RequestMapping("/admin/uplode/photo")
@ResponseBody
public Map<String, Object> updatePhoto(HttpServletRequest request,HttpServletResponse response,@RequestParam("myFile") MultipartFile myFile){
Map<String, Object> json = new HashMap<String, Object>();
try {
//输出文件后缀名称
System.out.println(myFile.getOriginalFilename());
DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
//图片名称
String name = df.format(new Date());

Random r = new Random();
for(int i = 0 ;i<3 ;i++){
name += r.nextInt(10);
}
//
String ext = FilenameUtils.getExtension(myFile.getOriginalFilename());
//保存图片       File位置 （全路径）   /upload/fileName.jpg
String url = request.getSession().getServletContext().getRealPath("/static/img/upload/phono/");
//相对路径
String path = "/"+name + "." + ext;
File file = new File(url);
if(!file.exists()){
file.mkdirs();
}
myFile.transferTo(new File(url+path));
json.put("success", "/static/img/upload/phono/"+path);
} catch (Exception e) {
e.printStackTrace();
}
return json ;

}