jsf上传图片之图片预览、图片存储、图片获取

1、图片预览：

  图片上传预览是一种在图片上传之前对图片进行本地预览的技术。使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。所以经常会出现上传的文件获得的路径是c:\fakepath\....，当然可以通过浏览器设置显示正确的文件路径，但是我们总不会期望用户在上传图片之前都设置下浏览器吧，而且用户不关心这些路径，只有开发人员才会关心。那么怎么实现图片上传时候的预览呢？这里有一个比较全的资料可以参考：javascript实现图片上传预览。

  通过html5的文件API也可以实现图片预览功能。参考代码为：

jsf代码

<!--图片预览框-->

<div id="uploadimage">
<div id="preview">
<img id="imghead" width="200px" height="150px" border=0 src=''>
</div>

<t:inputFileUpload id="uploadfile" value="#{inputNewGoodsBean.upFile }"  
    required="true" οnchange="previewImage(this)" accept="image/*" storage="file">
    </t:inputFileUpload>

previewImage(this)实现了图片预览功能

//图片预览   
function previewImage(file)
{
  var MAXWIDTH  = 200;
  var MAXHEIGHT = 150;
  var div = document.getElementById('preview');//获得div
  if (file.files && file.files[0])
  {
  div.innerHTML = '<img id=imghead>';
  var img = document.getElementById('imghead');
  img.onload = function(){
   var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
   img.width = rect.width;
   img.height = rect.height;
   img.style.marginLeft = rect.left+'px';
   img.style.marginTop = rect.top+'px';
  };
  var reader = new FileReader();
  reader.onload = function(evt){img.src = evt.target.result;};
  reader.readAsDataURL(file.files[0]);
  }
  else
  {
    var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
    file.select();
    var src = document.selection.createRange().text;
    div.innerHTML = '<img id=imghead>';
    var img = document.getElementById('imghead');
    img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
    status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
    div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>";
  }
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;

if( rateWidth > rateHeight )
{
param.width =  maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}

以上代码尚未作出分析。但功能已经实现。日后再做分析

2、关于图片存储：

将图片放到哪里呢？以怎样的形式存储呢？

图片一般是上传到服务器，我的JBOSS装在F盘的某个文档下，那么可以把JBOSS安装目录当做服务器。那数据库中该放些什么，可以把文件放在数据库，那样做的前提是文件不大，不是很多，但是文件一多且总量大的话把文件存储在数据库就显得不是很合理了，这种情况我们可以把文件路径存放在数据库中。

  刚才提到文件是放在JBOSS安装目录下，那怎么获得JBOSS服务器路径呢？我在网上找到一段代码，是在backingbean中获得JBOSS服务器端路径：HttpSession session = (HttpSession) FacesContext.getCurrentInstance().getExternalContext().getSession(true);
String rootpath = session.getServletContext().getRealPath("GoodsPic");那个GoodsPic是我在JBOSS服务端获得的建的文件夹，用来存放图片，这段代码获得的rootpath是这样的 F:\J2EE\software\jboss-4.2.3.GA\server\default\.\tmp\deploy\tmp6596605204279877901MyiBuyWeb-exp.war\GoodsPic，上传图片时可以把这个结果当做上传路径。但是问题出现了，当你重新启动JBOSS时，或者重新部署时发现图片不翼而飞了，没了（TOMCAT据说不会出现这种问题）！这时发现将文件上传至服务器安装目录下行不通，那怎么办？这时就把自己的电脑当服务器呗，文件上传后可以放在其他磁盘中，那怎么和服务器关联上呢？JBOSS的虚拟路径帮助我解决了这个问题，目前感觉虚拟路径在文件获得时起了比较大的作用，至于还有什么大作用有待学习。

  JBOSS配置虚拟路径 参考网站：JBOSS5.0以前的版本和JBOSS5.0虚拟路径配置

我用的JBOSS是4.2.3的，所以配置比较简单，只要在server.xml的host结点下添加如下代码：

<Context docBase="D:\\images" path="/pamuk/img" crossContext="true" />这时JBOSS就可以通过/pamuk/img找到D：\images路径了

现在图片存储的问题解决那么就讨论第三点

3、文件的获取

以图片来说，假如要获取已经存入到磁盘中的图片，该怎么做呢，结合刚才的虚拟路径，可以通过下面的方式获得

比如<h:graphicImage url="http://localhost:8080/pamuk/img/yourpic"/>注意8080是JBOSS的端口号。

问题解决了