上传图片，并展示缩略图

前端（下载jquery-form.js）

<div class="form-group ">
  <label for="picture" class="col-xs-3 control-label">Logo图标</label>
  <div class="col-xs-6">
		<input type="text" class="form-control" id="picture" readonly   name="picture"
			style="position:absolute;width:75%" >
		<input type="file" id="fileinput" name="fileinput" style="display:none;" 
			class="btn btn-primary btn-sm" onchange="changefile(this.value);"  accept="image/*">
		<label class="btn btn-default"  onclick="cli();" style="float:right;width:15%">浏览</label>
  </div>
</div>

<script type="text/javascript" src="${ctx}/js/common/jquery-form.js"></script>
//保存
function save_services(){
   $('#f').ajaxSubmit({  
        type:'post',  //提交方式  
        url:'${ctx}/services/add.html', //请求url 
        success:function(data){ //提交成功的回调函数             
        	if(data == "1"){
        		
        	}else{
        		
        	}   
        },
        error:function(){
        	alert('未知错误');
        }    
    });    
}
//点击上传图片
function cli(){
	$('#fileinput').trigger('click');
}
//上传图片改变输入框路径
function changefile(value){
	document.getElementById('picture').value=value;
}
//显示缩略图
$(function() {
    $("#fileinput").change(
       function() {
           var $file = $(this);
           document.getElementById('picture').value=$file.val();
           var fileObj = $file[0];
           var windowURL = window.URL || window.webkitURL;
           var dataURL;
           var $img = $("#viewuserpicture");
           //当图片名称为空时，照片不显示。
           if(document.getElementById('fileinput').value.trim()==""){
               document.getElementById('tr_userpicture').style.display = 'none';
            }
           if (fileObj && fileObj.files && fileObj.files[0]) {
               dataURL = windowURL.createObjectURL(fileObj.files[0]);
               //允许上传的图片格式  
               var newPreview = document.getElementById("fileinput").value;
               var regext = /\.jpg$|\.gif$|\.jpeg$|\.png$|\.bmp$/gi;
               if (!regext.test(newPreview)) {
                   newPreview=="";
                   alert("选择的照片格式不正确，请重新选择！");
                    $(fileObj).after($(fileObj).clone($(fileObj)));
                     $(fileObj).remove();
                     $("#tr_userpicture").hide();
                   return false;
               }
               $img.attr("src", dataURL);
               $("#tr_userpicture").show();

           } else {
               dataURL = $file.val();
               var imgObj = document.getElementById("viewuserpicture");

               imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
               imgObj.filters
                       .item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
           }
       });
});

后台（spring springmvc）

//添加
@ResponseBody
@RequestMapping("/add")
public String add(ServicesVo servicesVo,HttpServletRequest request,
		@RequestParam(required=false,value="fileinput") MultipartFile file){
	if(file != null){
		String fileName = DateTimeTools.getStringId();//自己写方法获取随机数作为新文件名
		String fileName_wei = file.getOriginalFilename().split("\\.")[1];//获取文件名后缀
		String fileName_New = fileName+"."+fileName_wei;//新文件名
		 // 判断文件内容是否为空  
		if (!file.isEmpty()) {  
			try {  
				// 文件保存路径  File.separator（linux与windows路径分隔符不一样，用java获取）
				String filePath = request.getSession().getServletContext().getRealPath("/") + "upload"+File.separator+"services"+File.separator  ;
				if(!new File(filePath).exists()){
					//文件夹不存在，则新建
					new File(filePath).mkdir();
				}                
				// 转存文件（拼接新文件名）
				file.transferTo(new File(filePath+fileName_New));                   
			} catch (Exception e) {  
				e.printStackTrace();  
			}  
			//封装到对象中
			servicesVo.setLogo(fileName_New);
		}  
	}
	//添加到数据库
	sResult = sserive.addServices(servicesVo);
	return sResult;
}