多附件上传

最新推荐文章于 2019-12-13 17:16:05 发布

relucent

最新推荐文章于 2019-12-13 17:16:05 发布

阅读量295

点赞数

分类专栏： JavaScript HTML prototype

本文链接：https://blog.csdn.net/relucent/article/details/45748663

版权

JavaScript 同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

prototype

6 篇文章 0 订阅

订阅专栏

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;\" >&#91&#21024&#38500&#93</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>

uploads_file.rar (1.8 KB)
下载次数: 62

relucent

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多附件上传

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;}},get
复制链接

扫一扫