日期:2014-05-16  浏览次数:20385 次

共享-----完美的多附件上传效果。
一下的代码是51js上找的一段代码

结合     patchclass(黑翼)     提供的163上的效果实现的。

供大家研究。


<html>

<head>

<style>
a.addfile   {
background-image:url(http://p.mail.163.com/js31style/lib/0703131650/163blue/f1.gif);
background-repeat:no-repeat;
background-position:-823px   -17px;
display:block;
float:left;
height:20px;
margin-top:-1px;
position:relative;
text-decoration:none;
top:0pt;
width:80px;
}

input.addfile   {
/*left:-18px;*/
}

input.addfile   {
cursor:pointer   !important;
height:18px;
left:-13px;
filter:alpha(opacity=0);  
position:absolute;
top:5px;
width:1px;
z-index:   -1;
}
</style>

<script   type= "text/javascript ">

function   MultiSelector(   list_target,   max   ){

//   Where   to   write   the   list
this.list_target   =   list_target;
//   How   many   elements?
this.count   =   0;
//   How   many   elements?
this.id   =   0;
//   Is   there   a   maximum?
if(   max   ){
this.max   =   max;
}   else   {
this.max   =   -1;
};

/**
  *   Add   a   new   file   input   element
  */
this.addElement   =   function(   element   ){

//   Make   sure   it 's   a   file   input   element
if(   element.tagName   ==   'INPUT '   &&   element.type   ==   'file '   ){

//   Element   name   --   what   number   am   I?
element.name   =   'file_ '   +   this.id++;

//   Add   reference   to   this   object
element.multi_selector   =   this;

//   What   to   do   when   a   file   is   selected
element.onchange   =   function(){

//   New   file   input
var   new_element   =   document.createElement(   'input '   );
new_element.type   =   'file ';
new_element.size   =   1;
new_element.className   =   "addfile ";

//   Add   new   element
this.parentNode.insertBefore(   new_element,   this   );

//   Apply   'update '   to   element
this.multi_selector.addElement(   new_element   );

//   Update   list
this.multi_selector.addListRow(   this   );

//   Hide   this:   we   can 't   use   display:none   because   Safari   doesn 't   like   it
this.style.position   =   'absolute ';
this.style.left   =   '-1000px ';

};


//   If   we 've   reached   maximum   number,   disable   input   element
if(   this.max   !=   -1   &&   this.count   > =   this.max   ){