天行健

《周易》曰:
天行健,君子以自强不息(乾卦)
地势坤,君子以厚德载物(坤卦)

常用链接

统计

最新评论

几种js实现的动态多文件上传

方式一:事先写好多个input.在点击时才显示。也就是说上传的最大个数是写死了的。
 html
<p>
<href='#' onclick='javascript:viewnone(more1)'> 添加附件 </a>
<div id='more1' style='display:none'>
    
<input type="file" name="attach1" size="50"javascript:viewnone(more2)>
    
</span>
</div>
<div id='more2' style='display:none'>
    
<input type="file" name="attach2" size="50"'>
</div>
</p>
js
<SCRIPT language="javascript">
  
function viewnone(e){
    e.style.display
=(e.style.display=="none")?"":"none";
  }
</script>

方式二:这种方式的动态多文件上传是实现了的,很简单的,不说废话看code
html
<input type="button" name="button" value="添加附件" onclick="addInput()">
<input type="button" name="button" value="删除附件" onclick="deleteInput()">
<span id="upload"></span>
js
<script type="text/javascript">
        
var attachname = "attach";
        
var i=1;
          
function   addInput(){
            
if(i>0){
                  
var attach = attachname + i ;
                  
if(createInput(attach))
                      i
=i+1;
              }
              
          } 
          
function deleteInput(){
                  
if(i>1){
                    i
=i-1;
                    
if(!removeInput())
                        i
=i+1;
                }
          } 
          
          
function createInput(nm){   
              
var  aElement=document.createElement("input");   
             aElement.name
=nm;
             aElement.id
=nm;
             aElement.type
="file";
             aElement.size
="50";
              
//aElement.value="thanks";   
             //aElement.onclick=Function("asdf()");  
               if(document.getElementById("upload").appendChild(aElement) == null)
                      
return false;
               
return true;
          }  

          
function removeInput(nm){
               
var aElement = document.getElementById("upload");
                
if(aElement.removeChild(aElement.lastChild) == null)
                    
return false;
                
return true;   
          }  
          
</script>

方式三:动态多文件上传,只是在oFileInput.click();这个地方,这样做就不能上传这个文件了,因为发现它在上传之时就把这个input中的文件置空了。很可能是为了安全着想吧!
另外还有一点就是说,click()只有在ie中才能正常运行。
虽说这种方式最终没能实现上传,但还是留下来参考,看看是否有人可以真正实现上传。
 html
<href="javascript:newUpload();">添加附件</A>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="1">
    
<TBODY id="fileList"></TBODY>
</TABLE>
<DIV id="uploadFiles" style="display:block"></DIV>
js
<SCRIPT language="javascript">

    
//---新建上传
    function newUpload(){
        
var oFileList = document.getElementById("fileList");
        
var fileCount = oFileList.childNodes.length + 1;
        
var oFileInput = newFileInput("upfile_" + fileCount);
        
if(selectFile(oFileInput)){
            addFile(oFileInput);
        }
    }
    
    
    
//----选择文件
    function selectFile(oFileInput){
        
var oUploadFiles = document.getElementById("uploadFiles");
        oUploadFiles.appendChild(oFileInput);
        oFileInput.focus();
        oFileInput.click();
//不能这样做,可能是为了安全着想吧!
        var fileValue = oFileInput.value;
        
if(fileValue == ""){
            oUploadFiles.removeChild(oFileInput);
            
return false;
        }
        
else
         
return true;
        
    }
    
    
//---新建一个文件显示列表
    function addFile(oFileInput){
        
var oFileList = document.getElementById("fileList");
        
var fileIndex = oFileList.childNodes.length + 1;
        
var oTR  = document.createElement("TR");
        
var oTD1 = document.createElement("TD");
        
var oTD2 = document.createElement("TD");
        
        oTR.setAttribute(
"id","file_" + fileIndex);
        oTR.setAttribute(
"bgcolor","#FFFFFF");
        oTD1.setAttribute(
"width","6%");
        oTD2.setAttribute(
"width","94%");
        oTD2.setAttribute(
"align","left");
        oTD2.innerText 
= oFileInput.value;
        oTD1.innerHTML 
= '<A href="javascript:removeFile('+ fileIndex + ');">删除</A>';
        
        oTR.appendChild(oTD1);
        oTR.appendChild(oTD2);
        oFileList.appendChild(oTR);
    }
    
    
//---移除上传的文件 
    function removeFile(fileIndex){
        
var oFileInput = document.getElementById("upfile_" + fileIndex);
        
var oTR        = document.getElementById("file_" + fileIndex);
        uploadFiles.removeChild(oFileInput);
        fileList.removeChild(oTR);
    }
    
    
//---创建一个file input对象并返回
    function newFileInput(_name){
        
var oFileInput  = document.createElement("INPUT");
        oFileInput.type 
= "file";
        oFileInput.id 
= _name;
        oFileInput.name 
= _name;
        oFileInput.size
="50";
        
//oFileInput.setAttribute("id",_name);
        //oFileInput.setAttribute("name",_name);
        //oFileInput.outerHTML = '<INPUT type=file id=' + _name + ' name=' + _name + '>';
        //alert(oFileInput.outerHTML);
        return oFileInput;
    }
    
</SCRIPT>

posted on 2007-01-26 17:21 重归本垒(Bing) 阅读(3673) 评论(5)  编辑  收藏 所属分类: JS

评论

# re: 几种js实现的动态多文件上传 2007-01-27 13:20 施伟

呵呵,我的方法不知道和你的三种方法有没有可比性,个人感觉还不错!
做一个 添加附件 然后做一个type为file的input框,把此框和span定位重叠起来 把file框透明度设置为0 即完全看不到,但是确实存在。这个时候点span的时候就是在点这个file框 但是看不到file框子 是不是实现了呢? 然后再结合你第二种的方式给框编号 动态增加就可以实现多文件上传了 。
呵呵 我在我的程序里面这样实现的 很好用 如果有兴趣讨论到我blog留言 或者发邮件给我吧 多交流。。。
  回复  更多评论   

# re: 几种js实现的动态多文件上传 2007-01-29 18:00 重归本垒(BNBN)

@施伟
呵呵!施伟,你这样做,如果实现了,那么比我的方法更胜一筹了,我以前也这样考虑过,只是觉的好麻烦,而没有去实现它!
另外,还非常谢谢你能关注我的Bolg!
  回复  更多评论   

# re: 几种js实现的动态多文件上传 2007-02-12 17:12 路过的

施伟 的做法,是不是还是不能解决,先选择了一个文件,提交服务器之后这个file input域的值又被自动清空的问题?  回复  更多评论   

# re: 几种js实现的动态多文件上传 2007-06-04 11:28 sangern

第二种方法不错  回复  更多评论   

# re: 几种js实现的动态多文件上传 2008-11-10 11:19 夏迪涛

这几个JS还是很不错的
  回复  更多评论   


标题  
姓名  
主页
验证码 *  
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-01-26 17:45 编辑过
 
 

推荐图书:
走出软件作坊》、《悟透JavaScript》、《Head First 设计模式
相关链接:
网站导航:



Web Page Rank Icon