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

Bootstrap fileinput下载地址

https://github.com/kartik-v/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 ;

    }

效果