grails上传多张图片实时预览

本人也是自己探索而来。初学，所以代码有点冗余，请多见谅。。。。本方法适合IE,搜狗浏览器，不适合火狐。

效果如图：

 

前台代码：

//这是创建页面，如果是修改页面，先从数据库中获得图片之后，如果还要求可以修改，需要再在load()方法中依情况加上document.getElementById("picdemo").src="";

<script> 

function loading(imgFile){
    var imgDiv = document.getElementById("picdemo");
         imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
         imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
         document.getElementById("picdemo").style.display='';
  }

  function load2(imgFile){
      var imgDiv = document.getElementById("picdemo2");
         imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
         imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
         document.getElementById("picdemo2").style.display='';

   }
  function load3(imgFile){
    var imgDiv = document.getElementById("picdemo3");
         imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
         imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value;
         document.getElementById("picdemo3").style.display='';
   }

 

var index=1;
function More(){
 if(index<3){
  document.getElementById("more"+index).style.display='';
  index=index+1;
 }else{
    alert("最多只能添加3张照片");
 }
}

</script>

  <tr class="prop" style="font: 12px;">
             <td valign="top" class="name">
                 <input  type="file"  id="photo"   οnchange="loading(this)" name="photo" value=""  />   
                 <input    style="display:none" type="image" name="picdemo" id="picdemo" src="" width="60" height="60" />                                                             
                 <input type="button" value="更多" class='button_40px'  οnclick="More();">
              </td>
  </tr>  
  <tr id="more1" style="display:none">
             <td>
                 <input  type="file"   id="photo2"  name="photo2" οnchange="load2(this);" value=""  />
                 <input style="display:none" type="image" name="picdemo2" id="picdemo2" src="" width="60" height="60" />
             </td>
  </tr>
  <tr id="more2" style="display:none">
             <td>
                 <input  type="file"   id="photo3"  name="photo3" value="" οnchange="load3(this);" />
                 <input  style="display:none" type="image" name="picdemo3" id="picdemo3" src="" width="60" height="60" />
             </td>
    </tr>

 

后台代码：

  def f = request.getFile("photo");
  def f1 = request.getFile("photo2");
  def f2 = request.getFile("photo3");

  InputStream iso =null;

 if(f&&!f.isEmpty()){
   iso =f.getInputStream();
   flag=insertPhoto(insertId,iso)
  }

 def insertPhoto(insertId,InputStream iso){
  def flag= false;
  try {
   Connection conn = SqlCon.getCon();  //获得数据库连接 此处，我已经写好了连接方法，直接调用，各位借鉴的时候，不可照搬，自己写连接。
   byte[] description = "";
   def   sql="""insert into photo_list(id,version,obstacle_id,photo,record_state)values
    (PHOTO_LIST_SEQUENCE.NEXTVAL,0,?,?,0)""";   //sql语句的id是根据sequence增长的，我在数据库中写好了sequence.各位自己写。
   def pstmt = conn.prepareStatement(sql);
   pstmt.setInt(1,insertId.toInteger());
   pstmt.setBinaryStream(2, iso, iso.available());
   pstmt.execute();
   pstmt.close();
   if(iso!=null){
    iso.close();
   }
   conn.close();
   flag=true;
  }catch (Exception e) {
   e.printStackTrace();
  }
  return flag

 }