图片上传及预览

jsp：

<div class="el-col el-col-6"><span class="uploadText">封面图<br><span>200*200px<br>100kb以下</span></span>
<div class="el-form-item">

<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input" style="width: 0px; opacity: 0; position: absolute;">

<input autocomplete="off" type="text" rows="2" validateevent="true" class="el-input__inner">


</div>
<div class="avatar-uploader upload active">
<input type="file" name="preview" οnchange="preview2(this)" />

//进行判断，如果是编辑就显示原来的图片，如果是新建，就不现实图片
<c:if test="${not empty activity.img }">
<div id="preview2"  path="img" name="img">
<img src="${ctxUser }/live/img/${activity.img}"/>
</div>

</c:if>
<c:if test="${empty activity.img }">
<div id="preview2" style="display:none;" path="img" name="img"></div>
</c:if>

<ul class="el-upload-list el-upload-list--text"></ul>
</div>

</div>
</div>
</div>

js:如果点击上传，div就显示图片

<script type="text/javascript">
  function preview2(file) {
$("#preview2").show();
    var prevDiv = document.getElementById('preview2');
    if (file.files && file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt) {
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }
  </script>

图片上传：

jsp：

<form:form modelAttribute="activity" class="el-form demo-ruleForm el-form--label-left"  enctype="multipart/form-data"   action="${ctxFront }/live/front/saveZhibo?activityId=${activityId }" method="post" >
<form:hidden  name="id" value="${activity.id }" path="id"/>
<div class="el-row">
<div class="el-col el-col-10">

<div class="el-form-item"><label for="nickname" class="el-form-item__label" style="width: 100px;">名称</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input">
<!---->
<!----><form:input htmlEscape="false" placeholder="名称" path="name"  name="name" type="text" rows="2"  value="" class="el-input__inner" />
<!---->
<!---->
</div>
<!---->
</div>
</div>

<div class="el-form-item"><label for="telPhone" class="el-form-item__label" style="width: 100px;">主办方</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input">
<!---->
<!----><form:input htmlEscape="false" placeholder="主办方" type="text" rows="2" name="sponsor" path="sponsor"  class="el-input__inner" />
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="el-form-item"><label for="qq" class="el-form-item__label" style="width: 100px;">地点</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input">
<!---->
<!----><form:input htmlEscape="false" placeholder="地点" type="text" rows="2" path="address" name="address"  class="el-input__inner" />
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="el-form-item"><label for="email" class="el-form-item__label" style="width: 100px;">开始时间</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input">
<!---->
<!----><form:input htmlEscape="false" placeholder="开始时间" type="text" rows="2" id="beginTime" path="beginTime" name="beginTime" value="${fn:substring(activity.beginTime, 0, 19)}" class="el-input__inner" />
<!---->
<!---->
</div>
<!---->
</div>
</div>
<div class="el-form-item"><label for="company" class="el-form-item__label" style="width: 100px;">结束时间</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input">
<!---->
<!----><form:input  placeholder="结束时间" type="text" rows="2" path="endTime" name="endTime" id="endTime" value="${fn:substring(activity.endTime, 0, 19)}" class="el-input__inner" />
<!---->
<!---->
</div>
</div>
</div>
</div>
</div>
<div class="el-row">
<div class="el-col el-col-12">

<div class="el-form-item"><label for="address" class="el-form-item__label" style="width: 100px;">描述</label>
<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-textarea"><form:textarea placeholder="请输入描述..."  rows="3" path="marks" name="marks" htmlEscape="false" class="el-textarea__inner"></form:textarea></div>
<!---->
</div>
</div>
</div>
</div>
<div class="el-row">
<div class="el-col el-col-6"><span class="uploadText">封面图<br><span>200*200px<br>100kb以下</span></span>
<div class="el-form-item">

<div class="el-form-item__content" style="margin-left: 100px;">
<div class="el-input" style="width: 0px; opacity: 0; position: absolute;">

<input autocomplete="off" type="text" rows="2" validateevent="true" class="el-input__inner">


</div>
<div class="avatar-uploader upload active">
<input type="file" name="preview" οnchange="preview2(this)" />
<c:if test="${not empty activity.img }">
<div id="preview2"  path="img" name="img">
<img src="${ctxUser }/live/img/${activity.img}"/>
</div>

</c:if>
<c:if test="${empty activity.img }">
<div id="preview2" style="display:none;" path="img" name="img"></div>
</c:if>

<!-- <div class="el-upload el-upload--text"><img src="http://s.tuwenzhibo.com/app/static/69user.png"  class="avatar active"><input type="file" name="file" accept="image/jpeg,image/png,image/gif," class="el-upload__input"></div> -->
<ul class="el-upload-list el-upload-list--text"></ul>
</div>

</div>
</div>
</div>
</div> 
<div class="el-form-item">
<!---->
<div class="el-form-item__content" style="margin-left: 100px;"><button type="submit" class="el-button el-button--primary"><!----><!----><span>保存设置</span></button>
<!---->
</div>
</div>
</form:form>

controller:

@RequestMapping(value = "saveZhibo")
public String saveZhibo(@RequestParam("preview") MultipartFile picfile,Activity activity, Model model, RedirectAttributes redirectAttributes,HttpServletRequest request,HttpServletResponse response) {

String token = CookieUtils.getCookie(request, "token");
if(StringUtils.isEmpty(token)){
return "modules/live/admin/login";
}else{
User user = userDao.findByLoginName(TokenMd5Utils.getUserNameByToken(token));
if(user != null){
request.setAttribute("user", user);
Long activityId = RequestUtil.getLong(request, "activityId");
activity.setUserId(user.getId());
activity.setCreateTime(new Date());
if(picfile != null && picfile.getOriginalFilename().length()>4){
System.out.println("filename不为空");
String picFilePath = WechatUtils.getLiveResourceSavePath(request)+File.separator;
FileUtils.createDirectory(picFilePath);
String sname = picfile.getOriginalFilename();
String fileType = sname.substring(sname.lastIndexOf("."));
String fname  = "picture_"+user.getId()+"_"+System.currentTimeMillis()+fileType;
File file = new File(picFilePath+fname);

try {
picfile.transferTo(file);
String basePath  = request.getScheme()+"://"+request.getServerName()+request.getContextPath();
System.out.println("basePath:"+basePath);
String url = basePath+"/userfiles/mediaPicture/"+file.getName();
activity.setImg(file.getName());
/*MaterialPicture picture = new MaterialPicture();
picture.setUserId(member.getUserId());
picture.setName(file.getName());
picture.setTitle(title);
picture.setQuoteUrl(url);
picture.setDepositUrl(picFilePath+file.getName());
picture.setMemberId(member.getId());
picture.setMemberName(member.getName());
picture.setMemberMobile(member.getMobile());
materialPictureService.save(picture);*/

request.setAttribute("result", "true");
request.setAttribute("msg", "上传图片素材成功");
} catch (Exception e) {
e.printStackTrace();
request.setAttribute("result", "false");
request.setAttribute("msg", "上传图片素材失败");
}
}else{
if(activityId!= null && activityId>0){
                Activity activity2 = activityService.get(activityId);
    activity.setImg(activity2.getImg());
}
System.out.println("filename为空");

request.setAttribute("result", "false");
request.setAttribute("msg", "文件为空！");
}
                if(activityId!= null && activityId>0){
                Activity activity2 = activityService.get(activityId);
                activity.setCreateTime(activity2.getCreateTime());
    activity.setCanyu(activity2.getCanyu());
    activity.setFabulous(activity2.getFabulous());
    activity.setOnline(activity2.getOnline());
}
                activity.setCanyu(0L);
activity.setFabulous(0L);
activity.setOnline(0L);
System.out.println("activityId-----------"+activityId);
activityService.save(activity);
request.setAttribute("activity", activity);
return "redirect:"+Global.FRONT_PATH+"/live/front/jumpIndex";
}else{
CookieUtils.setCookie(response, "token", "");
return "modules/live/admin/login";
}
}
}

//设置上传路径

/**
* 图文直播上传封面图
* @param request
* @return
*/
public static String getLiveResourceSavePath(HttpServletRequest request){
String rootpath = request.getRealPath("/userfiles");
return rootpath +File.separator + "live/img";
}