bootstrap进行图片上传

1.JS的引入

<!--引入js -->

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!--引入bootstrap -->

<script src="/scripts/js/bootstrap.min.js"></script>

script src="/scripts/js/fileinput.js"></script>
<script src="/scripts/js/zh.js"></script>

2.CSS的引入bootstrap.min.css

<link rel="stylesheet" type="text/css" href="/scripts/css/fileinput.css"/>

<link rel="stylesheet" type="text/css" href="/scripts/css/bootstrap.min.js"/>

3.DIV展示

        <div class="form-group" style="height: 400px">
 <label class="col-md-1 div_h_35" >商品图片：</label>
  <input type="hidden" name="picture" id="picture" value="" />
<input id="file1"  name="file1" type="file"  class="file"  style="width: 110px;hight:8px;">
 </div>

4.JS

$(function() {
      $("file1").fileinput();
    });

$("#file1").fileinput({
 language : 'zh',
 uploadUrl : "/backend/upload",
 autoReplace : false,
 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);
 $("#picture").attr("value", res.success);//执行成功后赋值存放图片url
});

5.SpringMVC

 

@Controller
public class UploadController {

    @RequestMapping(value = "/backend/upload", method = RequestMethod.POST)
    @ResponseBody
    public Map upload(HttpServletRequest request,HttpServletResponse response,@RequestParam("file1") MultipartFile myFile){
        Map json = new HashMap();
        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("/img/upload");
            //相对路径
            String path = "/"+name + "." + ext;
            File file = new File(url);
            if(!file.exists()){
                file.mkdirs();
            }
            myFile.transferTo(new File(url+path));
            json.put("success", "/img/upload"+path);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return json ;

    }
}

6.效果展示

 

 

 

 

 

转载于:https://my.oschina.net/u/3428012/blog/1358353