标签：bootstrap success dest photo Bootstrap myFile new 上传 美化
1.下载bootstrap-fileinput包和bootstrap包
bootstrap-fileinput包下载地址
bootstrap下载
2.目录结构
资源的引入语句为:
但按理说目录结构资源的正确引用：
…/common/bootstrap/js/bootstrap.js
但这样引用反而会报错，暂时无法理解
3.效果示意图
4.代码
- test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入js -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!--引入bootstrap -->
<!--引入bootstrap -->
<script src="common/bootstrap/js/bootstrap.js"></script>
<script
src="common/bootstrap-fileinpu/js/fileinput.min.js"
type="text/javascript"></script>
<script src="common/bootstrap-fileinpu/js/locales/zh.js"
type="text/javascript"></script>
<link
href="common/bootstrap-fileinpu/css/fileinput.min.css"
rel="stylesheet">
<!--引入bootstrap -->
<link href="common/bootstrap/css/bootstrap.css"
rel="stylesheet">
<link href="common/bootstrap/css/bootstrap-theme.min.css"
rel="stylesheet">
</head>
<body>
<!-- 上传图片的实现-->
<div class="form-group">
<label class="col-sm-2 control-label col-sm-offset-1">上传图片</label>--
<div class="col-sm-6">
<input id="myFile" type="file" name="image" class="fileloading">
</div>
<input type="hidden" name="user.logo" id="logo">
</div>
<script>
$("#myFile").fileinput({
language : 'zh',
uploadUrl : "./admin/upload/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);
})
</script>
</body>
</html>
- Controller层
@RequestMapping("/admin/upload/photo")
@ResponseBody
public Map<String,Object> updatePhoto(HttpServletRequest request, HttpServletResponse response, @RequestParam("image")MultipartFile myFile){
Map<String,Object> json=new HashMap<>();
try {
//输出文件后缀名称
System.out.println(myFile.getOriginalFilename());
DateFormat df=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
//图片名称
String name=df.format(new Date());
String ext= FilenameUtils.getExtension(myFile.getOriginalFilename());
String savePath="lostandfound_img"+"/"+name+"_"+myFile.getOriginalFilename();
System.out.println("savePth:"+savePath);
//文件上传的绝对路径
File dest=new File("D:/",savePath);
System.out.println(dest.getPath());
if(!dest.exists()){
dest.createNewFile();
}
myFile.transferTo(dest);
} catch (Exception e) {
e.printStackTrace();
}
json.put("success","/static/img/upload/photo");
return json;
}
标签：bootstrap,success,dest,photo,Bootstrap,myFile,new,上传,美化 来源： https://blog.csdn.net/qq_48621751/article/details/123467105
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。