struts2 图片上传至服务器 页面预览及页面及时图片预览功能实现方式

其实此类的帖子网上已经很多了,但为什么还要再发一帖呢,原因很简单,就是为了让自已映像更深,本人主要是做后台开发的,所以写不出多漂亮及多简洁的css样式,但实现功能是百分百没问题的,本人后台用的是struts2 springmvc mybatis 前台js Jq easyui jsp

页面效果

jsp代码

<span style="font-weight: normal;"><table id="dataGridOne" title="查询结果"></table><div id="dataWinOne">       <form id="dataForm" method="post" enctype="multipart/form-data">    <table>    <tr>    <td>    <label for="d_daiName">犬只名称:</label><input class="easyui-validatebox dataFormInput" id="d_daiName" name="data.daiName" data-options="validType:'maxlength[100]'"/>                    <label for="d_daiNickname">犬只昵称:</label>                    <input class="easyui-validatebox dataFormInput" id="d_daiNickname" name="data.daiNickname" data-options="validType:'maxlength[32]'"/>    </td>    </tr>   <tr>    <td>                    <label for="d_sdiId"><span style="color: red;">* </span>犬种名称:</label>                    <input class="easyui-combobox dataFormInput" id="d_sdiId" name="data.sdiId"                     data-options="valueField:'id',textField:'text',required:'true',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>                      <label for="d_daiColor"><span style="color: red;">* </span>犬毛色:</label>                    <input class="easyui-validatebox dataFormInput" id="d_daiColor" name="data.daiColor" data-options="required:'true',validType:'maxlength[50]'"/>    </td>    </tr>    <tr>    <td>                    <label for="d_daiHeight"><span style="color: red;">* </span>犬身高:</label>                    <input class="easyui-validatebox dataFormInput" id="d_daiHeight" name="data.daiHeight" data-options="required:'true',validType:'number'"/>                      <label for="d_daiWeight"><span style="color: red;">* </span>犬体重:</label>                    <input class="easyui-validatebox dataFormInput" id="d_daiWeight" name="data.daiWeight" data-options="required:'true',validType:'number'"/>    </td>    </tr>    <tr>    <td>                    <label for="d_daiLength"><span style="color: red;">* </span>犬体长:</label>                    <input class="easyui-validatebox dataFormInput" id="d_daiLength" name="data.daiLength" data-options="required:'true',validType:'number'"/>                      <label for="d_sdsId"><span style="color: red;">* </span>犬性别:</label>                    <input class="easyui-combobox dataFormInput" id="d_sdsId" name="data.sdsId"                     data-options="valueField:'id',textField:'text',required:'true',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>    </td>    </tr>    <tr>    <td>                    <label for="d_daiBirthday">犬出生日期:</label>                    <input class="easyui-datebox dataFormInput" id="d_daiBirthday" name="data.daiBirthday" data-options="validType:'checkTime'"/>                      <label for="d_daiIssterilization"><span style="color: red;">* </span>犬是否绝育:</label>                    <input class="easyui-combobox dataFormInput" id="d_daiIssterilization" name="data.daiIssterilization"                     data-options="valueField:'id',textField:'text',required:'true',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>    </td>    </tr>    <tr>    <td>                    <label for="d_sduId">犬只用途:</label>                    <input class="easyui-combobox dataFormInput" id="d_sduId" name="data.sduId"                     data-options="valueField:'id',textField:'text',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>                      <label for="d_daiImmunitysn">犬免疫证号:</label>                    <input class="easyui-validatebox dataFormInput" id="d_daiImmunitysn" name="data.daiImmunitysn" data-options="validType:'maxlength[50]'"/>    </td>    </tr>    <tr>    <td>                    <label for="d_adiDate"><span style="color: red;">* </span>收容日期:</label>                    <input class="easyui-datebox dataFormInput" id="d_adiDate" name="data.adiDate" data-options="validType:'checkTime',required:'true'"/>                    <label for="d_sarType"><span style="color: red;">* </span>收容原因:</label>                    <input class="easyui-combobox dataFormInput" id="d_sarType" name="data.sarType"                     data-options="valueField:'id',textField:'text',required:'true',editable:'false',lines:'true',panelHeight:'auto',panelMaxHeight:'180px'"/>      </td>    </tr>    <tr>    <td>                    <label for="d_adiCardsn">犬芯片编码:</label>                    <input class="easyui-validatebox dataFormInput" id="d_adiCardsn" name="data.adiCardsn" style="width:450px" data-options="validType:'maxlength[50]'"/>                    <label for="d_adiCardsn" style="border: 1px rgba(99,198,197,0.8) solid;width:78px;text-align:center;cursor:pointer;">                    <span  style="font-size:16px;color:#4687C2;">芯片扫描</span> </label>    </td>    </tr>    <tr>    <td>                    <label for="d_adiMemo">备注:</label>                    <input class="easyui-textbox dataFormInput" id="d_adiMemo" name="data.adiMemo" style="height:100px;width:748px;"                     data-options="validType:'maxlength[300]',multiline:'true'"/>    </td>    </tr>        <tr>    <td class="dataFormButtonRow">                    <input type="hidden" id="d_daiId" name="data.daiId"></input>    <input type="hidden" id="d_handler" name="handler"></input><a href="#" class="easyui-linkbutton" iconCls="icon-ok" style="width:80px" onclick="dataFormSubmit()">保存</a><a href="#" class="easyui-linkbutton" iconCls="icon-no" style="width:80px" onclick="winClose('dataWinOne')">关闭</a></td></tr></table><label for="d_daiPicDog"><img id="imgTable" style="width:180px;height:177px;border: 1px green solid;position: absolute;top:35px;left:700px;cursor:pointer;"/></label><table style="position: absolute;top:211px;left:700px;"><tr><td> <label for="d_daiPicDog" style="margin-top:3px;border: 1px rgba(99,198,197,0.8) solid;background-color:rgba(228,241,251,0.5); width:178px;text-align:center;cursor:pointer;"> <span  style="font-size:20px;color:#4687C2;">选择犬只照片</span> </label>                 <input type="file" id="d_daiPicDog" name="data.daiPicDog" onChange="startPreview()" style="width:83px;height:30px;display:none"/>  <td></tr></table></form></div> </span>

前台其它地方照常写,维独两个地方要特别注意

1.在表单上加上这句代码  enctype="multipart/form-data" 否则图片后台会接收不到

2.图片上传控件上的name需与后台对应,如我控件上name写的是 data.daiPicDog

data 代表我后台的action里面有一个data对象，daiPicDog是data里面的属性，我前台name写的是data.daiPicDog那么后台对应的属性是

private  File daiPicDog;

private String daiPicDogContentType;

private String daiPicDogFileName;

记住这是固定写法三件套，

File类型的属性用来接收图片 
属性后加了ContentType的属性用来接收图片内空,
属性后加了FileName的是用来接收图片名的,

若你前台写的是aaa 那么对应的三件套是

private  File aaa;

private String aaaContentType;

private String aaaFileName;

下面为后台代码

需要用到commons.io架包

里面的工具类FileUtils有个copyFile方法，非常好用，很方便

/** * 表单内容新增 */private int insertTable(SessionAdminUser sessionUser) {//生成图片服务器地址String importPuct = this.importPuct(data.getDaiPicDogFileName(), data.getDaiPicDog());int relust=0;if (isUPloadSuccess()) {data.setDaiPic(importPuct);data.setDaiPicDogFileName("");} else {data.setDaiPic("");}try {//将数据存入数据库relust=this.dogAdoptionInfoService.insertRecord(this.getData(),sessionUser);} catch (Exception e) {e.printStackTrace();}return relust;}

/** * 上传图片 * @param fileName 对应Bean中的String   @param fileContent +FileName 这个需要自己加入到Bean中但不需要在数据库中添加 * @param fileContent 对应Bean中的File 类型的 这个需要自己加入到Bean中但不需要在数据库中添加 * 全局使用需要在Bean中添加String  @param fileContent+ContentType * @return 返回值为存入数据库中的路径  */public String importPuct(String fileName, File fileContent) {String fileDir = "";SessionAdminUser sessionWorkUser = (SessionAdminUser) this.getSessionUser(Constant.Session_AdminInfo);fileDir = sessionWorkUser.getSaiId();int result = 0;String resultMsg = "";String realpath = null;if (null != fileContent) {String path = getServletContext().getRealPath("/");realpath = DogConstant.Upload_Path + Constant.Url_Delimiter+ fileDir + Constant.Url_Delimiter;try {realpath = saveWebFile(path, realpath, fileName, fileContent);result++;} catch (Exception e) {log.error(e);resultMsg = e.getMessage();}} else {resultMsg = "图片接收失败";}if (result > 0) {this.formJson.setSuccess(true);this.formJson.setReturnCode(EnumHandlerResult.Success.getId());this.formJson.setReturnMsg(EnumHandlerResult.Success.getText());} else {this.formJson.setSuccess(false);this.formJson.setReturnCode(EnumHandlerResult.Error.getId());this.formJson.setReturnMsg(resultMsg);}return realpath;}

public String saveWebFile(String path, String realPath,String uploadFileFileName, File uploadFile) throws Exception {////按业务需求生成指定且有规律的图片服务器地址String tmpFileName = StringUtil.getNowDateString("yyyyMMddHHmmss")+ "_" + new Random().nextInt(1000) + 1 + "."+ StringUtil.getExtension(uploadFileFileName, ".");File savefile = new File(new File(path + realPath), tmpFileName);if (!savefile.getParentFile().exists())savefile.getParentFile().mkdirs();FileUtils.copyFile(uploadFile, savefile);return realPath + tmpFileName;}

importPuct()与 saveWebFile()方法 的说明
这两个方法其实都是根业务相关的代码,可按业务根据自已的需求去实现,生成自已的服务器图片地址,
维一要说的也是最核心的一句代码就是 FileUtils.copyFile(uploadFile, savefile)这一句
前面所做的一切都是为了生成图片地址,此方法两个参数

第一个参数是原图片
第二个参数是图片拷贝后保存的位置路径,就这么简单

/** * 判断 文件上传是否成功 */public boolean isUPloadSuccess() {return this.formJson.getReturnCode() == EnumHandlerResult.Success.getId();}

该方法为判断图片在服务器是否上传成功,实现体就不贴出来了,你也可以自已写算法去判断

那么到这里图片已经成功上传至服务器并将图片地址保存至了数据库,下图为数据库保存的图片地址

那么图片上传成功了,这里顺便将图片页面显示代码也帖出来吧

前台用的是jQueryEasyui框架,由于代码量较多所以只贴核心js代码

/** * 初始化DataGrid的列 */function getDataGridColumns() {return [ [ {field : 'daiId',title : '收容犬只编码'},{field : 'daiName',title : '犬只名称'},{field : 'daiNickname',title : '犬只昵称'},{field : 'sdiName',title : '犬种名称'},{field : 'sdsName',title : '犬性别'},{field : 'daiIssterilization',title : '犬是否绝育',formatter:formatYNName},{field : 'daiImmunitysn',title : '犬免疫证号'},{field : 'daiPic',title : '犬照片',formatter : function(value,row,index){if(value==''|| undefined == value) return ;return MobileDisplay(value);}},{field : 'sarType',title : '收容原因',formatter:formatReason},{field : 'adiDate',title : '收容日期'}] ];}

/** * 鼠标移入时弹出图片预览 * 鼠标离开时隐藏图片预览 */function MobileDisplay(value){var url =  '<a  href="'+ path +'/' + value + '" target="_blank"';   url +='onmouseover="showThumbnail(event,\''+value+'\')"';   url +='onmouseout="hiddenThumbnail()" style="color:green">查看</a>';   return url;}/** * 鼠标移入事件 */function showThumbnail(event,value){var pageX = (event.pageX + 20)+'px';var pageY = (event.pageY + 3) +'px';if($('#protected').length != 0){$('#protected').remove();}var addDiv = '<div id="protected" style="border:3px rgba(18,162,127,0.3) solid;height:160px;width:180px;';   addDiv+='display: none;position: absolute;top:'+pageY+';left:'+pageX+'">';   addDiv+= '<img src="'+ path +'/' + value + '"  width="100%" height="100%"; style="border:0"/>';    addDiv+='</div>';    $('body').append(addDiv);$('#protected').fadeIn(600,'linear');}/** * 鼠标移出事件 */function hiddenThumbnail(){$('#protected').fadeOut(400,'linear');}

上面这些js代码并不是很难,所以我就不多做解释了,实现了鼠标移入查看按钮时显示图片功能,同时单击它将会打开一个新的图片预览窗口,如下两张图

单击打开新窗口预览效果

我鼠标一移入查看按钮上,图片将显示出来 我的 path变量存储的是项目路径，这些拼图片字符串地址的代码我一个写后台的都能写,写前台的我相信一看就明白

最后再实现一个稍微复杂一点的功能,图片及时预览

如本帖第一张图片效果,上传图片,当选择好图片后,在没上传之前图片及时显示图片在页面,这个功能非常的实用,但要兼容各种不同内核的浏览器所以稍微有点复杂,代友如下

/**图片及时预览*/function startPreview(){PreviewImage($("input[name='data.daiPicDog']")[0], 'imgTable');}

PreviewImage() 方法定义

由于该功能各个模块都会用到,所以这里我将它封装起来了 

function PreviewImage(fileObj,imgPreviewId,divPreviewId){      var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;      var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();                  var browserVersion= window.navigator.userAgent.toUpperCase();      if(allowExtention.indexOf(extention)>-1){           if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等              if(window.FileReader){                  var reader = new FileReader();                   reader.onload = function(e){                      document.getElementById(imgPreviewId).setAttribute("src",e.target.result);                  }                    if(fileObj.files[0]==null){                return ;                }                reader.readAsDataURL(fileObj.files[0]);              }else if(browserVersion.indexOf("SAFARI")>-1){                  alert("不支持Safari6.0以下浏览器的图片预览!");              }          }else if (browserVersion.indexOf("MSIE")>-1){              if(browserVersion.indexOf("MSIE 6")>-1){//ie6                  document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);              }else{//ie[7-9]                  fileObj.select();                  if(browserVersion.indexOf("MSIE 9")>-1)                      fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问                  var newPreview =document.getElementById(divPreviewId+"New");                  if(newPreview==null){                      newPreview =document.createElement("div");                      newPreview.setAttribute("id",divPreviewId+"New");                      newPreview.style.width = document.getElementById(imgPreviewId).width+"px";                      newPreview.style.height = document.getElementById(imgPreviewId).height+"px";                      newPreview.style.border="solid 1px #d2e2e2";                  }                  newPreview.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";                                              var tempDivPreview=document.getElementById(divPreviewId);                  tempDivPreview.parentNode.insertBefore(newPreview,tempDivPreview);                  tempDivPreview.style.display="none";                                  }          }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox              var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);              if(firefoxVersion<7){//firefox7以下版本                  document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());              }else{//firefox7.0+                                      document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));              }          }else{              document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);          }               }else{          alert("仅支持"+allowExtention+"为后缀名的文件!");          fileObj.value="";//清空选中文件          if(browserVersion.indexOf("MSIE")>-1){                                      fileObj.select();              document.selection.clear();          }                          fileObj.outerHTML=fileObj.outerHTML;    }  }

该方法解释起来不是一两句话能说明白的,所以不多解释,若有需要将代码全拷贝过去,稍做修改就能用了

同时要说一下CSDN论坛发帖子太费劲了,好不容易编辑好的帖子 审合通过后,他硬是在你帖子代码上加一些span之在的乱七八糟的标签,把原本好好的排版搞的乱七八糟,一个帖子每次都要编辑好几次才行

好了图片上传,页面显示,图片及时预览就介绍到这里了,不用谢谢叫我雷锋就行了 我QQ//554911540