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.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[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.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[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.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[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>
分享到：
相关推荐
"jquery实现多附件上传"这个主题涉及到的是利用jQuery来创建一个功能，允许用户在网页上选择并上传多个文件。这在现代网页应用中是非常常见的需求，比如论坛、社交媒体或者在线协作平台。 在jQuery中实现多附件上传...
在IT领域，多附件上传（MultiUpload）是一种常见的功能，特别是在网页应用中，它允许用户同时上传多个文件，极大地提高了用户交互的效率。本示例是关于如何利用Ajax技术实现多附件上传的一个Demo，让我们深入探讨...
在C#编程中，多附件上传是一项常见的功能，特别是在Web应用程序和桌面应用中，例如电子邮件系统、文件分享平台或者在线协作工具。这个标题"多附件上传源代码"指的是一个实现该功能的C#代码示例，非常适合初学者学习...
在IT行业中，多附件上传是Web应用中常见的一项功能，特别是在文档管理、社交媒体以及协作平台等领域。本资源提供了一款基于JavaScript实现的多附件上传表单添加类库的源码和示例程序，这对于开发者来说是一个很好的...
"JQ多附件上传"是一种基于JQuery的插件技术，它解决了用户一次性上传多个文件的需求，大大提升了用户体验。JQuery是JavaScript的一个库，以其简洁的API和丰富的功能而广受欢迎，它简化了DOM操作、事件处理以及Ajax...
在网页设计中，传统的单个文件上传方式往往限制了用户的选择，而SWFUpload的多文件选择特性解决了这一问题，使得用户能够在一次操作中上传多个文件，例如图片、文档或音频文件。 该控件的一大亮点是它提供了上传...
JavaScript多附件上传是一种常见的Web开发功能，用于在网页上实现用户选择并上传多个文件。这一技术主要基于HTML5中的File API，它允许开发者在浏览器端处理文件，包括读取、写入和上传。本文将详细讲解JavaScript...
在协同办公环境中，多附件上传功能是提升效率和便利性的重要特性。本文将详细解析如何在Domino平台中设计并实现这一功能。Domino是由IBM开发的企业级协作平台，其核心是Lotus Notes，它提供了丰富的协作工具和数据库...
在JavaScript的世界里，静态多附件上传是一个常见的需求，特别是在网页应用中。这个需求涉及到前端的交互设计、数据处理以及与服务器的通信。下面我们将详细探讨这个主题。 首先，"静态"在这里指的是没有依赖服务器...
【JSP多附件上传系统】是一个基于Java JSP技术实现的Web应用，旨在提供一个能够支持用户上传多个文件的功能。在传统的Web开发中，单个文件上传是常见的操作，但随着互联网应用的发展，多文件上传的需求越来越普遍，...
本资源“layui多附件上传.rar”是基于layui实现的多文件上传功能的示例代码，它提供了完整的新增、修改和删除操作，并且经过了测试，确保了功能的稳定性。 1. layui基础知识： layui是一款遵循MIT协议的前端UI框架...
多附件上传效果js多附件上传效果js多附件上传效果js
总的来说，这个C# Web上传控件提供了一种方便的方式来实现多附件上传，使得开发者能够快速地在自己的Web应用中集成这一功能。尽管压缩包中没有包含完整的项目，但通过理解源代码和适当调整，你可以根据自己的项目...
在IT行业中，多附件上传是一项常见的功能，尤其在企业级应用和协作平台中。这个"多附件上传demo.zip"提供了一个简单的多附件上传案例，它适用于开发者在进行类似功能开发时参考。本案例主要涉及的技术栈是Struts，这...
多附件上传允许用户一次选择并上传多个文件，这在许多业务场景中非常实用。在jQuery中，可以通过`multiple`属性设置HTML的`<input type="file">`元素，使其支持多选。然后通过循环遍历选取的文件，逐个发送到服务器...
多附件上传是指允许用户一次性选择并上传多个文件的功能。这一功能不仅能够提升用户体验，还能提高工作效率。为了实现这一功能，开发者需要掌握多种技术和方法，包括前端文件选择控件的设计、后端文件处理逻辑的编写...
在ASP.NET中，多附件上传是一项常见的功能，它允许用户一次性上传多个文件，例如图片、文档或其他类型的文件。本实例代码旨在提供一个详尽的解决方案，涵盖了多种不同的实现方法。以下将详细介绍这些方法及其关键...
***实现多附件上传的代码涉及到前端JavaScript以及后端的***处理技术，能够实现在网页上动态地添加多个文件上传控件，允许用户上传多个文件。这种实现方式在功能上类似于常见的邮件系统或网盘服务中的多文件上传功能...