uploads.js
var UploadBuilder=(function(){ var yao={ byId:function(id,win){ if(typeof(id)=='string'){ return((win||window).document.getElementById(id));}else if(typeof(id)=='object'){ return id;}}, getPosition:function(id){ var oElement=this.byId(id); var positionX=0; var positionY=0; while(oElement!=null){ positionX+=oElement.offsetLeft; positionY+=oElement.offsetTop; oElement=oElement.offsetParent;}; return{'x':positionX,'y':positionY};}, createElement4Html:function(_html){ var div=document.createElement('div'); div.innerHTML=_html; return div.childNodes[0];}, createObjectClass:function(methods){ var origclass=function(){}; var p=origclass.prototype; for(var method in methods){ p[method]=methods[method];}; return origclass;}}; return yao.createObjectClass({ init:function(info){ this._index=0; this._uploads=[]; this._form=yao.byId(info.form); this._bind=yao.byId(info.bind); this._show=yao.byId(info.show); this._name=info.name; this._area=yao.createElement4Html('<span style=\'display:none\'><span>'); this._form.appendChild(this._area); this._newFile(); this._show.style.display='none';}, update:function(){}, _newFile:function(){ var _file_name_id=this._name+"_"+(this._index++); this._ofile=yao.createElement4Html('<input name=\"'+_file_name_id+'\" id=\"'+_file_name_id+'\" type=\"file\" style=\"position:absolute;filter:alpha(opacity=0);left:-1000px;width:30px;\" value=\"\" hidefocus>'); document.body.appendChild(this._ofile); var _this=this; this._bind.οnmοuseοver=function(event){ var event=window.event||event; var _btn_point=yao.getPosition(_this._bind); var _Left=event.x-_this._ofile.offsetWidth/2; if(_Left<_btn_point['x']){ _Left=_btn_point['x'];}; if(_Left>_btn_point['x']+_this._bind.offsetWidth-_this._ofile.offsetWidth){ _Left=_btn_point['x']+_this._bind.offsetWidth-_this._ofile.offsetWidth;}; _this._ofile.style.posLeft=_Left; _this._ofile.style.posTop=_btn_point['y'];}; this._ofile.οnchange=function(){ _this._addFile();};}, _addFile:function(){ for(var i=0;i<this._uploads.length;i++){ if(this._uploads[i].value==this._ofile.value){ alert('\u8be5\u6587\u4ef6\u5df2\u88ab\u6dfb\u52a0'); return;};}; this._area.appendChild(this._uploads[this._uploads.length]=this._ofile); this._ofile.οnmοuseοver=null; this._refurbish(); this._newFile();}, _refurbish:function(){ var _this=this; this._show.innerHTML=''; this._show.style.display='none'; this._show.style.display=(this._uploads.length>0)?'block':'none'; for(var i=0;i<this._uploads.length;i++){ var _upload_text=yao.createElement4Html('<span style=\"font:normal 12px Tahoma;\"></span>'); _upload_text.innerText=' '+this._uploads[i].value+' ' var _delete_btn = yao.createElement4Html('<span style=\"border:0px solid #3333ff;background:;cursor:hand;color:#888888;font-size:13px;font-family:"COURIER";font-style:normal;width:13px;height:13px;overflow:hidden;\" >[删除]</span>'); this._show.appendChild(_delete_btn); this._show.appendChild(document.createElement('br')); _delete_btn.οnclick=(function(){ var _i=i; return function(){ _this._delete(_i);};})();}}, _delete:function(index){ for(var i=this._uploads.length-1;i>=0;i--){ if(i==index){this._uploads[i].parentElement.removeChild(this._uploads[i]);break;};}; this._uploads.splice(index,1); this._refurbish();}});})();
uploads.html
<html>
<head>
<title>添加附件</title>
</head>
<body>
<script type="text/javascript" src='yao.uploads.simple.js'></script>
<style>
input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<form id='upload-form' method="post" action="" enctype="multipart/form-data">
<input type="button" id='upload-btn' value="选择上传文件" /><br>
<div id='upload-div' style=''></div>
</form>
</body>
<script type="text/javascript">
var oUpload = new UploadBuilder();
oUpload.init({
form : 'upload-form',
bind : 'upload-btn',
show : 'upload-div',
name : 'upload'
});
oUpload.update();
</script>
</html>