使用uploadify控件上传并预览图片

*****************************介绍************************************************

该功能实现是在ssm框架下(spring、springMVC、mybatis)

 

 

前台代码:

jsp:---------------------------------

//1、图片预览容器

<div id="pic_view_div" style="width:108px; height:150px"> 
     <img src="" width="108" height="150" id="pic_view"> 
</div>

//2、上传按钮，其中的id为控件所需

<div style="margin-left: 100px;">
     <input type="file" name="uploadify" id="uploadify" align="center"/>
</div>

//3、上传进度显示区域

<td colspan="2" rowspan="3" align="center" valign="center">
      <div id="fileQueue" style="width:200px;"></div>
</td>

js----------------------------------------------------------------

$(document).ready(function(){

       //初始化控件

       initUpload();

       var picUrl = $("#picUrl").val();
       if(picUrl !=''){
                $("#pic_view").attr("src",ctx+"/"+picUrl);
        }else{
                $("#pic_view").attr("src",ctx+"/core/resources/images/defaultPerson.png");
        }

});//end ready

function initUpload(){
    var personId = $("#id").val();
    var year = $("#year").val();
    var uploadifyHome = ctx + '/core/resources/scripts/lib/uploadify';
    var uploadUrl = ctx + '/application/socialSecurity/medicalPerson/doPictureCreate.do?sessionId=' + sessionId;
    $("#uploadify").uploadify({
        'swf': uploadifyHome + '/uploadify.swf', //指定上传控件的主体文件
        'uploader'       : uploadUrl, //指定服务器端上传处理文件
        'cancelImg': uploadifyHome + '/uploadify-cancel.png',
        'queueID'        : 'fileQueue',
        'formData':{'personId':personId,'year':year},
        'auto'           : true,  
        'buttonText'     : '上传图片', 
        'multi'          : false,  //设置为true将允许多文件上传。
        'buttonCursor'   : 'pointer', 
        'fileObjName'    : 'file', 
        'fileTypeDesc': '图片文件',
        'height'         : '25',
        'rollover': false,
        'queueSizeLimit': 1, //队列中允许的最大文件数目
        'fileTypeDesc'   : '支持格式:jpg/gif/jpeg/png/bmp.',   
        'fileTypeExts': '*.jpg;*.gif;*.jpeg;*.png;*.bmp',//允许的格式 
        'progressData'   : 'all',
        //'debug'    : true,
        'onUploadStart': function (file) {
            //alert(file.id);
         },
         'onQueueComplete': function (queueData) {
             //layer.alert('上传成功：' + queueData.uploadsSuccessful + ' 文件，失败：' +                             queueData.uploadsErrored + '个文件。');
         },
         //检测FLASH失败调用
         'onFallback': function () {
             layer.alert("您未安装FLASH控件，无法上传文件！请安装FLASH控件后再试。");
         },
         'onUploadSuccess'  : function(file,data,response) {
             //console.log(data);
            var dataStr = JSON.parse(data);
            //设置图片预览 
            var exNameVal = dataStr.extraCode;
            $("#picUrl").val(exNameVal);
            $("#pic_view").attr("src",ctx+"/"+exNameVal);
        } 
    });
}

//controller------------------------------------------------------------------

  /**
   * 上传相片
   * 上传成功返回相片保存路径
   * @param foreignData
   * @param file 相片文件
   * @return
   */
  @RequestMapping("doPictureCreate")
  @ResponseBody
  public String doPictureCreate(@RequestParam("personId") String personId,
      @RequestParam("year") String year, @RequestAttribute("file") MultipartFile file) {
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    CommandResult result = new CommandResult();
    OperationLog operInfo = createOperationLog(request, BuzType.MEDICAL_PERSON,
        BuzDataDefinition.MEDICAL_PERSON, OperationType.ATT_CREATE);
    if (!CommonUtil.ifFilePicture(file.getOriginalFilename())) {
      result.setCode("fail");
      result.setMessage("相片保存失败：图片格式错误");
      return JacksonUtil.doJackson(result);
    }
    File dir = new File(request.getServletContext().getRealPath(Constants.ATT_PATH));
    if (!dir.exists()) {
      dir.mkdir();
    } else if (dir.isFile()) {
      result.setCode("fail");
      result.setMessage("相片保存失败：保存路径错误," + dir.getAbsolutePath());
      return JacksonUtil.doJackson(result);
    }
    dir = new File(request.getServletContext().getRealPath(Constants.ATT_PATH + "/medicPerson"));
    if (!dir.exists()) {
      dir.mkdir();
    } else if (dir.isFile()) {
      result.setCode("fail");
      result.setMessage("相片保存失败：保存路径错误," + dir.getAbsolutePath());
      return JacksonUtil.doJackson(result);
    }
    String fileName = personId + "_" + year + "_" + operInfo.getOperationTime().getTime();
    File saveFile = new File(dir.getAbsolutePath() + "/" + fileName);
    if (saveFile.exists()) {
      result.setCode("fail");
      result.setMessage("相片保存失败：同名文件已经存在");
      return JacksonUtil.doJackson(result);
    }

    try {
      // create file
      file.transferTo(saveFile);
      result.setCode("success");
      // 返回相片url,客户端在保存人员信息时(doBuzDataUpdate)将该路径传回服务端MedicalPerson.picUrl
      result.setExtraCode(Constants.ATT_PATH + "/medicPerson/" + fileName);
      result.setMessage("相片保存成功");
    } catch (Exception e) {
      if (saveFile.exists()) {
        saveFile.delete();
      }
      result.setCode("fail");
      result.setMessage("相片保存失败：" + e.getMessage());
    }
    return JacksonUtil.doJackson(result);
  }

 

//--------------------------------------------注意------------------------------------------

如果页面有滚动动条,可能遇到下面两个问题

1、上传图片的按钮会发生垂直错位

这里的错位是指:鼠标放到上传按钮上发现没有变成小手(pointer),且点击按钮后没有文件预览弹出窗口,这些问题在开发人员模式下(F12)会看的很明白。

 

这个问题可以打开你uploadify.css，改成如下:即可

.uploadify {
    position: relative;
    vertical-align: bottom;
    /* margin-bottom: 1em; */
}

 

 

2、上传按钮发生水平错位.解决方法如下

 

<td colspan="2" align="center">
      <table>
               <tr>
                   <td>
                         <input type="file" name="uploadify" id="uploadify" align="center"/>
                   </td>
               </tr>
       </table>
</td>