js批量上傳圖片

 

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UpLoadAdjunct.ascx.cs" Inherits="WebUI.UserControls.UpLoadAdjunct" %>
<style type="text/css">
.divAll{ background:#D4E3E7; margin-top:10px; height:100%;}
.title{margin:8px;padding:3px; background:#FFFFFF; height:24px; font-size:14px; line-height:24px;}
.content{margin:8px;padding:14px; background:#FFFFFF; height:100%; font-size:12px; text-align:left}
.contentLeft{float:left;width:250px;}
.contentRight{ margin-left:300px;margin-top:20px;width:65%;}
.table{ border:solid 1px #8FBCCF; border-collapse:collapse; font-size:12px;}
.table td{ border:solid 1px #8FBCCF;}
.adjunctImg{margin-left:20px;}
.aNode{margin-left:5px;margin-right:5px;}
a{color:blue;text-decoration:underline;}
</style>

<input type="radio" οnclick="switchPanel(this)" checked/><span id="spanDescription">隱藏上傳附件面板</span>
<div class="divAll" id="divUploadAdjunctPanel" style="display:block;">
    <div class="title">
     <img src="../images/attachment.gif" width="13" height="15" align="absmiddle">添加附件：
    </div>
    <div class="content" >
        <div id="divUploadControlContainer" class="contentLeft">
        ＊點擊可多次添加附件<br />
         <input name="file" type="file" id="fileOld" οnchange="fileChange(this)"/>           
        </div>  
        <div class="contentRight">
            <div id="divAdjunctList">
                附件列表：<br />
            </div>     
            <div style="margin-top:5px;">
            附件描述：
                <textarea name="txtAreaRemark" id="txtAreaRemark" rows="3" cols="73" runat="server">
                </textarea>
            </div>
        </div>
      <div style="margin-top:40px; text-align:center;">       
       <asp:Button id="btnImgUpLoad" runat="server" Text="上傳附件" OnClick="btnImgUpLoad_Click"/>
       <input type="text" id="txtSiteUrl" runat="server" style="display:none;"/>
    </div>
</div>
<script>
if(document.forms.length!=0)
{
document.forms[0].enctype="multipart/form-data";
}
else
{
//alert("未設置表單無素，該頁面無法實現批量上傳！");
}
///用於此時獲取附件的個數，默認會有個空的附件，所以說當附件的數目大於一的時候才上傳了附件
function checkAdjunctNum(){
    var fileElements = document.getElementsByTagName("input");
var fileCount = 0;
for(var i=0;i<fileElements.length;i++)
{
   if(fileElements[i].type!=undefined&&fileElements[i].type=="file")
   {
    fileCount++;
    if(fileCount>1)
    {
     break;
    }
   }
}
    if(fileCount == 1)
    {
        alert("未上傳任何附件！");
        return false;
    }
    return true;
}
///給默認的file上傳附件
function fileChange(obj){
var upFile = new UpFile();
upFile.createFileControl(obj);
}

///file控件類
function UpFile(){

}

///該方法中創建上傳文件的控件,因爲在頁面中首頁就有一個文件上傳控件，所以我們得
///首先得到該文本控件是不是動態添加的．併爲新上傳的控件添加onchange事件　
UpFile.prototype.create = function(){
        var divUploadControlContainer = document.getElementById("divUploadControlContainer");  
   var fileElement = null;
             
            fileElement = document.createElement("input");
            fileElement.type="file";
            fileElement.name="file";
           
            divUploadControlContainer.appendChild(fileElement);

   var me = this;
        fileElement.onchange = function(){
    me.createFileControl(this);
   }
}

///該方法用於在點擊文件上傳控件的時候調用創建文件控件方法作用，並在調用創建上傳文件控件後隱藏前一個
///保持始終多一個空的上傳文件控件
UpFile.prototype.createFileControl = function(fileElement){
   if(fileElement.value!="")
   {
    var pathParts = fileElement.value.split('\\');
    this.createPreview(fileElement,fileElement.value,pathParts[pathParts.length-1],"");
    fileElement.style.display = "none";
   }
   else
   {
    divUploadControlContainer.removeChild(fileElement);
   }
    this.create();
}

///該方法，用於組裝成附件的列表
UpFile.prototype.createPreview = function(fileElement,adjunctUrl,adjunctName,raId){
    var divAdjunctList = document.getElementById("divAdjunctList");
    var divUploadControlContainer = document.getElementById("divUploadControlContainer");

    var aNode = document.createElement("a");
    aNode.innerText=adjunctName;
    aNode.href=adjunctUrl;  
    aNode.target = "_blank";
    aNode.className = "aNode";

    var adjunctImg = document.createElement("img");
    adjunctImg.src="Images/attachment.gif";
    adjunctImg.className = "adjunctImg";

    var delImg = document.createElement("img");
    delImg.src="Images/fujian_delete.gif";
delImg.raId = raId;
    delImg.adjunctName = adjunctName;

    divAdjunctList.appendChild(adjunctImg);
    divAdjunctList.appendChild(aNode);
    divAdjunctList.appendChild(delImg);

    delImg.onclick = function(){
    if(!confirm("是否確認要刪除？"))
    {
        return ;
    }  
   
   /* if(this.raId!="")
    {
        var txtSiteUrl = "<%=this.txtSiteUrl.ClientID %>";
        txtSiteUrl = document.getElementById(txtSiteUrl);
       
        //var count = UpLoadAdjunct.DeleteAdjunct(this.adjunctName,this.raId).value;
        var count = UpLoadAdjunct.DeleteAdjunct(this.adjunctName,this.raId,txtSiteUrl.value).value;
        if(count<=0)
        {  
            alert('刪除附件失敗！');
            return ;
        }
        alert('成功從服務器刪除附件！');
    }*/
   
if(fileElement!=null)
{
        divUploadControlContainer.removeChild(fileElement);
}
        divAdjunctList.removeChild(aNode);
        divAdjunctList.removeChild(adjunctImg);
        divAdjunctList.removeChild(delImg);
       
    }
}
//var adjunctListStr ='e:\\ss.txt?ss|*|';
var adjunctListStr ='D:\\南海電子政務二期\\SEC_NHPortal\\源代碼\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\\\J2EE開發環境建立手冊.doc?2|*|D:\\南海電子政務二期\\SEC_NHPortal\\源代碼\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\\\Struts和JSF在JBuilder中的配置（自創）.doc?2|*|D:\\南海電子政務二期\\SEC_NHPortal\\源代碼\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\服務器返回ds客戶端調用方法.txt?2|*|D:\\南海電子政務二期\\SEC_NHPortal\\源代碼\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\需要修改的webconfig文件內容.config?2|*|D:\\南海電子政務二期\\SEC_NHPortal\\源代碼\\SEC_NHPortal\\WebUI\\FILE\\ReportUPDown\\AjaxPro.dll?2|*|';
//adjunctListStr = adjunctListStr.replace("\\","\\\\");
//var adjunctListStr = "<%=adjunctListStr %>";
var upFile = new UpFile();

var adjunctInfo = adjunctListStr.split("|*|");

var adjunctUrl,adjuntNam,raId;

for(var i=0;i<adjunctInfo.length-1;i++)
{
adjunctUrl = adjunctInfo[i].split("?")[0];
adjuntNam = adjunctUrl.split("\\");
adjuntNam = adjuntNam[adjuntNam.length-1];
raId = adjunctInfo[i].split("?")[1];
    upFile.createPreview(null,"/file/reportUpdown/"+adjuntNam,adjuntNam,raId);
}
function switchPanel(obj){
    obj.checked = !obj.checked;
    if(obj.checked)
    {
        document.getElementById("divUploadAdjunctPanel").style.display='block';
        document.getElementById("spanDescription").innerHTML = "隱藏上傳附件面板";
    }else   
    {
        document.getElementById("divUploadAdjunctPanel").style.display='none';
        document.getElementById("spanDescription").innerHTML = "顯示上傳附件面板";
    }
}
</script>