漂亮的附件上传功能之页面表现 模仿qqmail 163mail

 jsp里代码

        <!--file chooser start-->
        <input name="fattachlist" id="fattachlist" type="hidden" value=""/>
        <div>
          <div style="height:20px;">
         <div style="float:left;margin-top:2px">
              <script language="javascript" type="text/javascript">
                document.write(OutputAttachBtn());
              </script>
         </div>
       </div>
       <div style="margin-bottom:2px;margin-left:14px;height:auto!important;height:0px;">
            <div id="filecell" style="margin-bottom:4px;line-height:17px;">
              <div id="Duploader0" style="display:none">
                <INPUT name="uploader0" class='file upload' id="uploader0" type=file onChange="AfterAddFile('uploader0')"><span id='Suploader0'></span><span id='SIZEuploader0'></span>&nbsp;&nbsp;<A onclick="DelUploader('uploader0')"><img src="../../images/delg.gif" alt="删除" align="absmiddle" style="border:0"></A><INPUT name="localFile" id="localFile" type=hidden><INPUT name="upFile" id="upFile" type=hidden>
              </div>
            </div>
          </div>
        </div>
        <!--file chooser end-->

js代码：

//from qqmail
window.onerror=function(){return true;};

//navigate
var gsAgent = navigator.userAgent;
var gfAppVer = parseFloat(navigator.appVersion);
var gIsOpera = gsAgent.indexOf("Opera") > -1;
var gIsKHTML = gsAgent.indexOf("KHTML") > -1 || gsAgent.indexOf("Konqueror") > -1 || gsAgent.indexOf("AppleWebKit") > -1;
var gIsSafari = gsAgent.indexOf("AppleWebKit") > -1;
var gIsIE = gsAgent.indexOf("compatible") > -1 && !gIsOpera;//&& gsAgent.indexOf("MSIE") > -1;
var gIsTT = gIsIE ? (navigator.appVersion.indexOf("TencentTraveler") != -1 ? 1 : 0) : 0;
var gIsFF = gsAgent.indexOf("Gecko") > -1 && !gIsKHTML;
var gIsNS = !gIsIE && !gIsOpera && !gIsKHTML && (gsAgent.indexOf("Mozilla") == 0) && (navigator.appName == "Netscape");
if (gIsIE) {
 var reIE = new RegExp("MSIE (//d+//.//d+);");
 reIE.test(navigator.userAgent);
 var gIEVer = parseFloat(RegExp["$1"]);
}

//global base function
var gd = document;
function Gel(id, ob) {
 return (ob ? ob : gd).getElementById(id);
}
function GelTags(tag, ob) {
 return (ob ? ob : gd).getElementsByTagName(tag);
}
function S(i, win) {
 return (win?win:window).document.getElementById(i);
}
function SO(i, o) {
 return Gel(i, o);
}
function SN(i, win) {
 return (win?win:window).document.getElementsByName(i);
}
function SNO(i, o) {
 return (o ? o : gd).getElementsByName(i);
}
function F(sID, win) {
 if(!sID) return null;
 var frame = S(sID, win);
 if(!frame) return null;
 return frame.contentWindow?frame.contentWindow:(win?win:window).frames[sID];
}
function GetSid() {
 try {var s = top.g_sid;}catch(e){}
 s = s ? s : (S("sid") ? S("sid").value : "");
 if (!s) {
  s = (top.location.href.split("?")[0]).split("/");
  s = s[s.length - 1];
 }
 return s;
}
function Show(obj, bShow) {
 obj = (typeof(obj) == "string" ? S(obj) : obj);
 if (obj) obj.style.display= (bShow ? "" : "none");
}
function ShowN(name, bShow) {
 var o = SN(name);
 for (var i = o.length - 1; i >= 0; i--) {
  Show(o[i], bShow);
 }
}
function GetPath(type, bMustFull) {
 var p = "";
 switch (type) {
  case "image":
   try {p = top.images_path;}catch(e){}
   if(!p) p = "/images/";
   break;
  case "js":
   try {p = top.js_path;}catch(e){}
   if(!p) p = "/include/scripts/";
   break;
  case "css":
   try {p = top.css_path;}catch(e){}
   if(!p) p = "/include/css/";
   break;
  case "skin":
   try {p = top.skin_path;}catch(e){}
   if(!p) p = "0";
   break;
 }
 if (bMustFull && type != "skin" && p.indexOf("http://") == -1) p = "http://" + location.host + p;
 return p;
}
function GetTopWin() {
 return top.topFrame ? top.topFrame : top;
}
function GetMainWin() {
 return top.mainFrame ? top.mainFrame : top;
}

//附件处理相关函数
var AttachID=1;
var AttacheTmp = "<span>&nbsp;&nbsp;</span><a onclick=/"DelUploader(/'_Name/')/"><img src='"+GetPath("image")+"delg.gif' alt='删除' align='absmiddle' style='border:0'></a><input name='localFile' id='localFile' type=hidden><input name='upFile' id='upFile' type=hidden>";
function CheckAttahWarnningType() {
 var nat = ["exe","msi","scr","cmd","bat","com"];
 var fds = Gel('filecell').childNodes;
 var len = nat.length;
 for (i = fds.length - 1; i >= 0; i--) {
  var v = fds[i].childNodes[0].value.toLowerCase();
  for (j = 0; j < len; j++) {
   var pos = v.lastIndexOf(nat[j]);
   if (pos != -1 && v.length - pos == nat[j].length) return true;
  }
 }
 return false;
}
function AddFileCell(mode) {
 var attr = [["<INPUT name=_Name class='file upload' id=_Name type=file onchange='AfterAddFile(/"_Name/")'><span id=S_Name></span><span id=SIZE_Name></span>", false],["<INPUT name=_Name class='file' id=_Name contentEditable=false type=file size=45>", true]][mode == "new" ? 0 : 1];
 var Template = attr[0] + AttacheTmp;
 var FileCell = Gel('filecell');
 var Name="uploader"+AttachID;
 var Div=gd.createElement("div");
 Show(Div, attr[1]);
 Div.id="D"+Name;
 Div.innerHTML = Template.replace(new RegExp("_Name", "g"),Name);
 FileCell.appendChild(Div);
 AttachID++;
}
function AddFileCellFF() {
 AddFileCell("old");
}
function FormatSize(size) {
 if (size > 1024*1024) return parseInt(size * 100 / (1024 * 1024)) / 100.0 + "M";
 if (size > 1024) return parseInt(size * 100  / 1024) / 100.0 + "K";
 return size + "Byte";
}
function AfterAddFile(id) {
 Gel("S" + id).innerText = Gel(id).value;
 Show(Gel("D"+id), true);
 AddFileCell("new");
}
function DelUploader(Name) {
 var FileCell = Gel('filecell');
 var FileObj = Gel(Name);
 if (FileObj.disabled) {
  var lp = FileObj.value.lastIndexOf("//");
  if (lp != -1) {
   var al = GetMainWin().Gel("fattachlist");
   var name = FileObj.value.substr(lp+1) + " |";
   var pos = al.value.indexOf(name);
   if (pos != -1) {
    al.value = al.value.substr(0, pos) + al.value.substr(pos + name.length, al.value.length - pos - name.length);
   }
  }
 }
 FileCell.removeChild(FileObj.parentNode);
 CheckAttach();
}
function CheckAttahforIE() {
 var fcell = Gel('filecell');
 return (Gel('filecell').childNodes.length > 1 || fcell.parentNode.childNodes.length > 2 ? 1 : 0);
}
//该函数混淆时候要放到用户保留库
function CheckAttach() {
 //只有是IE才检查，为了提高附件上传用户感...无办法
 if (gIsIE) {
  try{
  var s=[[true, false],[false, true]][CheckAttahforIE() > 0 ? 1 : 0];
  Show('sAddAtt1', s[0]);
  Show('sAddAtt2', s[1]);
  }catch(e){}
 }
}
function IeFileUpload() {
 F("iefileupload").document.body.innerHTML = '<input id=/'btn/' type=button onclick=/'parent.S("AttachFrame").onclick = function() {parent.document.getElementById("uploader" + (parent.AttachID-1)).click();parent.CheckAttach(); };try{parent.S("AttachFrameMB", parent.F("qqmail_menu")).parentNode.onclick = function() {parent.document.getElementById("uploader" + (parent.AttachID-1)).click();parent.CheckAttach();};}catch(e){}/'>';
 setTimeout(function(){F("iefileupload").document.getElementById("btn").click();}, 0);
}
function OutputAttachBtn() {
 return '<a id="AttachFrame" onclick="AddFileCellFF()"><img src="'+GetPath("image")+'icon_att.gif" align="absmiddle" style="margin:0 3px 0 0"><span id="sAddAtt1">添加文件...</span><span id="sAddAtt2" style="display:none;">继续添加...</span></a>' + '&nbsp;&nbsp;' + (gIsIE && gIEVer >= 6 ? "<iframe id='iefileupload' style='width:0;height:0;' onload='IeFileUpload()'></iframe>" : "");
}
还有一个css样式可以参考 qqmail去下载