163電子郵箱附件上傳界面效果實現

于 2008-04-26 19:12:00 发布
阅读量6.3k 收藏 1
点赞数
分类专栏： 學習筆記 Java Web Programming 文章标签： function javascript class string callback div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzj227/article/details/2332899
版权
163上傳附件界面簡潔美觀,  技術上沒有數量限制.在IE和Firefox同樣效果.

實現技術:CSS+Javascript
技術要點:使用css設置透明度等於0. 達到隱藏Input的效果.  將透明度等於0的Input放在提示信息之上.
效果圖:
    Upload File Effect


后补：
2008/12/03 23:22， 几分钟前， 上传了再次实现的代码， 刷新了几次我的资源， 没有发现上传的内容， 大家有意的话可以搜索一下， 实现起来没有什么难点.
后补2：
2008/12/04 23:08, 依然没有发现上传的资源， 干脆将代码粘近来算了， 代码有点长

------------------------- testUpload.html -------------------------------
  1. <html> 
  2. <head>
  3. <title> test: ui of upload file</title>
  4. <style>
  5.     
  6. .uf *{font-size:10pt;}
  7. .uf a.btn {padding:0px 5px 0px 16px; vertical-align:top; text-decoration: none; background-image:url(mailicon1.gif);    background-repeat:no-repeat; white-space:nowrap;}
  8. .uf .fileItem{}
  9. .uf .fileItem .addFile {white-space:nowrap;}
  10. .uf .fileItem .addFile a.addFile{background-position:-2px -146px; padding-left:20px; width:80px; height:20px; overflow:hidden;}
  11. .uf .fileItem .addFile a.addFile:Hover{background-position:-1px -169px; color:red; width:80px; height:20px; overflow:hidden; text-decoration:underline}
  12. .uf .fileItem .addFile a.addFile span.addFileLabel{vertical-align:top; margin-left:3px; }
  13. .uf .fileItem .addFile INPUT{position:relative; left: -100px; width:100px;opacity:0.0;filter:alpha(opacity=0);}
  14. .uf .fileItem .removeFile{}
  15. .uf .fileItem .removeFile a.readAnchor{}
  16. .uf .fileItem .removeFile a.removeFile{background-position:-2px -102px; width:12px; }
  17. .uf .fileItem .removeFile a.removeFile:Hover{background-position:-1px -122px; color:red; width:12px; text-decoration:underline}
  20. .ufDebug .fileItem .addFile INPUT{opacity:0.1;filter:alpha(opacity=10);}
  21. </style>
  22. <script src="upload.js" type="text/javascript"></script>
  23. <script src="upload.js" type="text/javascript"></script>
  24. <script src="upload.js" type="text/javascript"></script>
  25. <script src="upload.js" type="text/javascript"></script>
  26. <script>
  28. function initTestPage(){
  29.     var fh = document.getElementById("uploadFileHolder");
  30.     var uf = new UploadFile(fh,"uf", "uploadFile_Remain");
  31.     uf.addFileItem("XXXXX2.txt", "http://www.sina.com.cn/XXXXX2.txt");
  32.     uf.addFileItem();
  33. //  console.debug(uf.getFileItem(0));
  35. }
  36. </script>
  38. </head>
  39. <body onload="initTestPage();">
  41. <div id="uploadFileHolder" class="ufDebug uf" maxcount="3"></div>
  43. </body>
  44. </html> 

------------------------- upload.js -------------------------------
  1. /**
  2.  *
  3.  *  author: chris
  4.  *  date  : 2008.12
  5.  *  email : zzjzzj227 AT 163.com
  6.  *  
  7.  *  script for upload UI
  8.  */
  10. function UploadFile(/*HTMLDIVElement*/ fileHolder,
  11.                     /*String*/fileItemName, 
  12.                     /*String*/fileItemFlagName){
  13.   this.domNode = fileHolder;
  14.   this.fileItemName = fileItemName;
  15.   this.fileItemFlagName = fileItemFlagName;
  16.   this.partType = {fileItem:"fileItem"};
  17.   this.text = {
  18.     add:"Add", 
  19.     remove:"Remove", 
  20.     addHint:"Add File", 
  21.     removeHint:"Remove File", 
  22.     removeFileAlert:"Are you sure to remove file '[0]'"
  23.   };
  24.   
  25.   function $C(tag, pNode, id){
  26.     var d = (pNode && pNode.ownerDocument)?pNode.ownerDocument:document;
  27.     var c = d.createElement(tag);
  28.     if(pNode)pNode.appendChild(c);
  29.     if(id)c.id = id;
  30.     return c;
  31.   }
  33.   this.getCount = function(){
  34.   
  35.     var c = {count:0, uf:this};
  36.     UploadFile.parseDom(this.domNode, function(elmt, parm){
  37.         if(parm.uf._isFileItemElmt(elmt)){
  38.           c.count++;
  39.         }
  40.       }, c, 2);
  41.       
  42.     return c.count;
  43.   }
  45.   this.getMaxCount = function(){
  47.     var mc = this.domNode.getAttribute("maxcount");
  48.     return /^/d+$/.test(mc)?parseInt(mc):1;
  49.     
  50.   }
  51.   
  52.   this.doAddFileItem = function (){
  53.     
  54.     var fiDiv = $C("DIV");
  55.     var _fiHTML =  
  56.         '<div domNode="domRemoveFile" class="removeFile" style="display:none">'+
  57.         '     <input type=checkbox domNode="domRemain" name="'+this.fileItemFlagName+'" value="Y" style="display:none">'+
  58.         '     <a domNode="domDown" class="readAnchor" target="_blank"></a>'+
  59.         '     <a domNode="domRemoveBtn" class="btn removeFile" href="javascript:void(0);"title="'+this.text.removeHint+'" >'+this.text.remove+'</a>'+
  60.         '</div>'+
  61.         '<div domNode="domAddFile" class="addFile">'+
  62.         '  <a align="right" class="btn addFile" domNode="domAddBtn"  href="javascript:void(0);" title="'+this.text.addHint+'">'+
  63.         '     <span domNode="domAddBtnLabel" class="addFileLabel">'+this.text.add+'</span>'+
  64.         '     <input type=file class="uploadFile" domNode="domAddInput" name='+this.fileItemName+' οnkeydοwn="return false;" size="1">'+
  65.         '  </a>'+
  66.         '</div>';
  67.     var firstChild = this.domNode.firstChild;
  68.     
  69.     if(firstChild){
  70.       this.domNode.insertBefore(fiDiv, firstChild);
  71.     }else{
  72.       this.domNode.appendChild(fiDiv);
  73.     }
  74.     
  75.     fiDiv.className = "fileItem";
  76.     fiDiv.setAttribute("domNode", "domFileItem");
  77.     fiDiv.setAttribute("partType", this.partType.fileItem);
  78.     fiDiv.innerHTML = _fiHTML;
  79.     fiDiv._fi = new UploadFileItem(this, 0);
  80.     
  81.     return fiDiv._fi;
  82.   }
  83.   this.addFileItem = function (/*string*/ downURL, 
  84.       /*stirng*/ downDesc, 
  85.       /*String*/ existFileMark){
  86.         
  87.     var firstItem = this.getFileItem(0);
  88.     
  89.     if(this.getCount()<this.getMaxCount() && (!firstItem || firstItem.isFilled())){
  90.         var fileItem = this.doAddFileItem(null);
  91.         fileItem.domRemain.checked = !!downURL && !!downDesc;
  92.         if(fileItem.domRemain.checked){
  93.           fileItem.domRemain.value = !!existFileMark?existFileMark:"Y";
  94.           fileItem.setLink(downURL, downDesc);
  95.           fileItem.switchToRemoveStatus();
  96.         }
  97.     }
  98.     
  99.   }
  100.   this.getFileItem = function (/*int*/ fileItemIdx){
  101.     
  102.     var fiPart = this._getFileItemElmt(fileItemIdx);
  103.     return fiPart?fiPart._fi:null;
  104.     
  105.   }
  106.   this._isFileItemElmt = function(/*HTMLElement*/ div){
  107.     
  108.     if(div && UploadFile._getPartType(div)==this.partType.fileItem){
  109.       return true;
  110.     }
  111.     
  112.     return false;
  113.     
  114.   }
  115.   this._getFileItemElmt = function (/*int*/fileItemIdx){
  116.     
  117.     var args = {uf:this, testCount:-1, idx:fileItemIdx, fileItemDiv:null};
  118.     
  119.     UploadFile.parseDom(this.domNode,
  120.       function(elmt, args){
  121.         if(args.uf._isFileItemElmt(elmt)){
  122.           args.testCount = args.testCount + 1;
  123.           if(args.testCount==args.idx){
  124.             args.fileItemDiv = elmt;
  125.             return false;
  126.           }
  127.         }
  128.       }, args, 2);
  129.       
  130.      return args.fileItemDiv;
  131.      
  132.   }
  133.   
  134.   this.init = function(){
  135.     var mc = this.getMaxCount();
  136.     UploadFile.debug("max count:"+mc);
  137.   }
  138.   
  139.   this.init();
  140. }
  142. UploadFile.debug = function(s){
  143.   if(typeof console != "undefined" && console.debug){
  144.     console.debug(s);
  145.   }
  146. }
  148. UploadFile.mixin = function(o, o2){
  149.   
  150.   for(var p in o2){
  151.     o[p] = o2[p];
  152.   }
  153.   return o;
  154.   
  155. }
  157. UploadFile.parseDom = function(/*HTMLElement*/ emt,
  158.         /*function(HTMLElement childElmt, parm){break if return false;}*/ callback,
  159.         parm,
  160.         /*int, 0 is not limited, 1 is emt itself*/parseLevel
  161.         ){
  162.           
  163.   if(!emt)return;
  164.   if(false == callback(emt, parm))return false;
  165.   if(1 == parseLevel || 0 > parseLevel) return;
  166.   
  167.   var _c = emt.firstChild;
  168.   while(_c){
  169.      if(false == UploadFile.parseDom(_c, callback, parm, parseLevel>1?parseLevel-1:0)){
  170.         return false;
  171.      }
  173.     _c = _c.nextSibling;
  174.   }
  175. }
  177. UploadFile.getFileName = function(fullPath){
  178.     var fileParts = /[]([^]+)$/.exec(fullPath);
  179.     return fileParts&&fileParts.length==2?fileParts[1]:fullPath;
  180. }
  182. UploadFile._getPartType=function(/*div*/ div){
  183.     if(!div || !div.getAttribute)
  184.       return null;
  185.     return div.getAttribute("partType");
  186. }
  188. UploadFile._getDomNode=function(/*div*/ div){
  189.     if(!div || !div.getAttribute)
  190.       return null;
  191.     return div.getAttribute("domNode");
  192. }
  194. function UploadFileItem(/*UploadFile*/ uf, /*int*/ idx){
  195.   var uploadFileItem = this;
  196.   this.domFileItem = null;
  197.   
  198.   this.domRemoveFile = null;
  199.   this.domDown = null;
  200.   this.domRemoveBtn = null;
  201.   this.domRemain = null;
  203.   this.domAddFile = null;
  204.   this.domAddBtn = null;
  205.   this.domAddBtnLabel = null;
  206.   this.domAddInput = null;
  207.   
  208.   this.uf = uf;
  209.   this.isFilled = function(){
  210.     if(this.domRemain.checked)return true;
  211.     if(!/^/s*$/.test(this.domAddInput.value))return true;
  212.     return false;
  213.   }
  214.   this.getInput = function(){
  215.     return this.domInput;
  216.   }
  217.   this.getRemain = function(){
  218.     return this.domRemain.checked;
  219.   }
  220.   this.getFileName = function(){
  221.     return this.domAddInput.value;
  222.   }
  223.   this.setLink = function(/*string*/aLabel, /*aLink*/ aHref){
  224.     this.domDown.innerHTML = aLabel;
  225.     this.domDown.href = aHref;
  226.     this.domDown.title = aHref;
  227.   }
  228.   this.switchToRemoveStatus = function(){
  229.     this.domAddFile.style.display="none";
  230.     this.domRemoveFile.style.display="";
  231.   }
  232.   
  233.   this.remove = function(){
  234.     this.domFileItem.parentNode.removeChild(this.domFileItem);
  235.     this.uf.addFileItem(null);
  236.   }
  237.   this.init = function(){
  238.     var argsTestDomNodes = {};
  239.    
  240.     UploadFile.parseDom(this.uf._getFileItemElmt(idx),
  241.       function(elmt, args){
  242.         var dn = UploadFile._getDomNode(elmt);
  243.         if(!dn)return;
  244.         args[dn]=elmt;
  245.       }, argsTestDomNodes, 0);
  246.     UploadFile.mixin(this, argsTestDomNodes);
  247.     
  248.     this.domAddInput.onchange = function(){
  249.       var uf = uploadFileItem.uf;
  250.       var item = uploadFileItem;
  251.       var count = uf.getCount();
  252.       item.setLink(
  253.           UploadFile.getFileName(item.domAddInput.value),
  254.           item.domAddInput.value
  255.         );
  256.       item.switchToRemoveStatus();
  257.       uf.domNode.appendChild(item.domFileItem);
  258.        uf.addFileItem(null);
  259.     } /* domAddInput.onchange */
  260.     
  261.     this.domRemoveBtn.onclick = function(){
  262.       var fileName = uploadFileItem.domDown.innerText || uploadFileItem.domDown.textContent;
  263.       if(confirm(uploadFileItem.uf.text.removeFileAlert.replace("[0]", fileName))!=true){
  264.         return;
  265.       }
  266.       uploadFileItem.remove();
  267.     } /* domRemoveBtn.onclick */
  268.   }
  269.   
  270.   this.init();
  271. }
------------------------- mailicon1.gif -------------------------------
mail icon for test
最终效果
最终效果
zzj227
关注
专栏目录
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值