jsp實現多圖上傳並預覽（上傳功能改天發，適用於IE，其他沒試）

老師讓做一個粘貼欄網站，其中要求實現這個功能，網上找了好多，大多隻能實現上傳一張並預覽，還有好多是asp的，沒看，找到的好多說實現了但是拿來沒法實現，自己花了兩天時間終於搞出來了，今天發出來給大家參考。想要上傳功能的去我資源站下哈。

<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#preview_wrapper{
    display:inline-block;
    width:300px;
    height:300px;
    background-color:#CCC;
}
#i{ /* 該對象用戶在IE下顯示預覽圖片 */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#i{ /* 該對象用戶在IE下顯示預覽圖片 */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{ /* 該對象只用來在IE下獲得圖片的原始尺寸，無其它用途 */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    visibility:hidden;
}
#preview{ /* 該對象用戶在FF下顯示預覽圖片 */
    width:300px;
    height:300px;
}
</style>
<style type="text/css">
             .fil {
               width:300px;
               }
             .fieldset_img {
                border:1px solid blue;
                 width:500px;
                  height:400px;
                 text-align:left;
              }
             .fieldset_img img {
                     border:1px solid #ccc;
                      padding:2px;
                      margin-left:5px; }
             #ImgList li   {
                       text-align:center;
                        list-style:none; display:block; float:left; margin-left:5px;
             }
</style>

    <script type="text/javascript">
     //全局變量
     var br;
     var file;
     var img;
     var FileCount=1; //上傳文件總數
      //添加上傳文件按鈕
     function showFile(obj) {
//   var filePath=$(obj).val();


      obj.select();
       var filePath = document.selection.createRange().text;
      // alert("文件路徑："+filePath);
      var FireFoxFileName="";
      //FireFox文件的路徑需要特殊處理
      if(window.navigator.userAgent.indexOf("Firefox")!=-1)
       {
        FireFoxFileName=filePath;
         filePath=$(obj).prev()[0].files.item(0).getAsDataURL();
       }
       if(!checkFile(filePath,FireFoxFileName))
       {
         $(obj).prev().val("");
          return;
       }
        if(filePath.length==0)
        {

         alert("請選擇上傳文件");
           return false;
        }
       var imgId="i"+FileCount;
        var showImg=document.getElementById(imgId);
        showImg.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";

        showImg.filters.item(
           'DXImageTransform.Microsoft.AlphaImageLoader').src =filePath;




          // var show2=document.getElementById("img2");
      //   show2.filters.item(
     //      'DXImageTransform.Microsoft.AlphaImageLoader').src =filePath;
           // autoSizePreview(show,0, 0 );



             //   img1.filters.item(
        //   'DXImageTransform.Microsoft.AlphaImageLoader').src =filePath;
      }
      // 增加文件
      function addFile(){
      FileCount++;
       br='<br id="b'+FileCount+'">';
      file='<input id="f'+FileCount+'" type="file" οnchange="showFile(this)">';
      $("#fil").append(br);
      $("#fil").append(file);


      img='<img id="i'+FileCount+'" width="100" height="100" style="cursor:pointer;" οnchange="">';
     imgdel='<a href="#" id="a'+FileCount+'" οnclick="DelImg()">刪除</a>'
       $("#ImgList").append(img);
        $("#ImgList").append(imgdel);
     // $("#ImgList").append(br);
      }

//刪除上傳文件（file以及img）
function DelImg(){

             var ID=FileCount;
             $("#f"+ID).remove();
             $("#b"+ID).remove();
             $("#i"+ID).remove();
             $("#a"+ID).remove();
             FileCount--;
             return false;
}
            //檢查上傳文件是否重複,以及擴展名是否符合要求
function checkFile(fileName,FireFoxFileName)
{
              var flag=true;
               $("#ImgList").find(":img").each(function(){
               if(fileName==$(this).attr("src")) {
               flag=false;
               if(FireFoxFileName!='')  {
                  alert('上傳文件中已經存在\''+FireFoxFileName+'\'!');
                    }
                    else{
                     alert('上傳文件中已經存在\''+fileName+'\'!');
                    }
                    return;
                  }
                });

     //文件類型判斷
     var str="jpg|jpeg|bmp|gif";
      var fileExtName=fileName.substring(fileName.indexOf(".")+1);
      //獲取上傳文件擴展名
       if(FireFoxFileName!='')//fireFox單獨處理
      {
      fileExtName=FireFoxFileName.substring(FireFoxFileName.indexOf(".")+1);
      }
      //alert(fileExtName);
      if(str.indexOf(fileExtName.toLowerCase())==-1)
       {
       alert("只允許上傳格式爲jpg，jpeg，bmp，gif的文件。");
       flag=false;
       }
       return flag;
       }
       </script>

</head>
<body>
<p>上傳預覽圖片:<br>
<div id="fil" class="fil">
<span>
<input id="f1" name="f0" type="file" οnchange="showFile(this)"/>


   </span>
   </div>
   <input type="button" value="添加" onClick="addFile(this)"/>
   </p>
   <div id="ok">
   <fieldset class="fieldset_img">
   <legend>圖片展示</legend>
   <ul id="ImgList">
   <li>
   <div id="show">
   <img id="i1" width="100" height="100" style="cursor:pointer;" >
    <a href="#" id="a1" οnclick="DelImg()">刪除</a>
    
   </div>

   </li>
   </ul>
   </fieldset>
   </div>
     </body>
     </html>