多附件上传
uploads.jsvar 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;},createObjectClass:function(methods){var origclass=function(){};var p=origclass.prototype;for(var method in methods){p=methods;};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.onmouseover=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.onchange=function(){_this._addFile();};},_addFile:function(){for(var i=0;i<this._uploads.length;i++){if(this._uploads.value==this._ofile.value){alert('\u8be5\u6587\u4ef6\u5df2\u88ab\u6dfb\u52a0');return;};};this._area.appendChild(this._uploads=this._ofile);this._ofile.onmouseover=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.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;\" >&#91&#21024&#38500&#93</span>');this._show.appendChild(_delete_btn);this._show.appendChild(document.createElement('br'));_delete_btn.onclick=(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.parentElement.removeChild(this._uploads);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>
页:
[1]