Support forums » Products » ASP Uploader » Re: Style the Files loading table

Style the Files loading table

Last post 10-08-2012, 9:12 AM by Kenneth. 1 replies.
Sort Posts: Previous Next

  •  10-08-2012, 5:49 AM 74906

    Style the Files loading table

    Reply Quote

    Is it possible to style the files loading table? and even move its location in reference to the Upload button?

     

    [upload button]

     

    [upload table] 

    [paperclip][filename.jpg][tick]

    [paperclip][filename.jpg][tick]

    [paperclip][filename.jpg][tick]

     

    want to change so that:

     

    [upload table]

    [paperclip][filename.jpg][tick]

    [paperclip][filename.jpg][tick]

    [paperclip][filename.jpg][tick]

     

    [upload button]

     

    thanks

    Shaun. 

  •  10-08-2012, 9:12 AM 74909 in reply to 74906

    Re: Style the Files loading table

    Reply Quote

    Hi shaunw,

     

    You can custom the queue table to achieve it. The example below shows you how to custom the queue table.

     

    1. <%@ Language="VBScript" %>  
    2. <!-- #include file="aspuploader/include_aspuploader.asp" -->  
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
    4. <html xmlns="http://www.w3.org/1999/xhtml">  
    5. <head>  
    6.     <title>  
    7.         example  
    8.     </title>  
    9. </head>  
    10. <body>  
    11. <br/><br/>  
    12.           <div id="queuediv" style="display: none;">  
    13.             <div id="queuedivtablecontainer">  
    14.             </div>  
    15.         </div>  
    16.     <div >  
    17.         <%  
    18.             Dim uploader  
    19.             Set uploader=new AspUploader  
    20.             uploader.Name="myuploader"  
    21.             uploader.InsertText="Upload File (Max 10M)"  
    22.             uploader.MultipleFilesUpload=true  
    23.              uploader.render()  
    24.         %>  
    25. <script>  
    26.   
    27. var uploader = document.getElementById("myuploader");  
    28. uploader.handlequeueui=myqueueuihandler;  
    29. function myqueueuihandler(list)  
    30. {  
    31.         document.getElementById("queuediv").style.display="";  
    32.         var container=document.getElementById("queuedivtablecontainer");  
    33.         container.innerHTML="";  
    34.         var table=document.createElement("table");  
    35.         table.style.borderCollapse="collapse";  
    36.         table.cellSpacing=0;  
    37.           
    38.         table.border=1;  
    39.         table.width="360px";  
    40.         for(var i=0;i<list.length;i++)  
    41.         {  
    42.             var img=document.createElement("IMG");  
    43.             var imgFinish=document.createElement("IMG");  
    44.             var imgError=document.createElement("IMG");  
    45.             var imgUpload=document.createElement("IMG");  
    46.             var imgQueue=document.createElement("IMG");  
    47.             img.src="aspuploader/resources/circle.png";  
    48.             imgFinish.src="aspuploader/resources/uploadok.png";  
    49.             imgError.src="aspuploader/resources/uploaderror.png";  
    50.             imgUpload.src="aspuploader/resources/uploading.gif";  
    51.             imgQueue.src="aspuploader/resources/stop.png";  
    52.             var name=list[i].FileName  
    53.             var size=list[i].FileSize // (or -1)  
    54.             var stat=list[i].Status // Finish|Error|Upload|Queue  
    55.             var func=list[i].Cancel;  
    56.             var row=table.insertRow(-1);  
    57.             row.insertCell(-1).appendChild(img);  
    58.             row.insertCell(-1).innerHTML=name;  
    59.               
    60.             var last=row.insertCell(-1);  
    61.             if(stat=="Queue")  
    62.             {  
    63.             imgQueue.onclick=func;  
    64.                 last.appendChild(imgQueue);  
    65.             }  
    66.             else if(stat=="Finish")  
    67.             {  
    68.                 last.appendChild(imgFinish);  
    69.             }  
    70.             else if(stat=="Error")  
    71.             {  
    72.                 last.appendChild(imgError);  
    73.             }  
    74.             else if(stat=="Upload")  
    75.             {  
    76.                 last.appendChild(imgUpload);  
    77.             }  
    78.   
    79.         }  
    80.           
    81.         container.appendChild(table);  
    82.   
    83.     return false; //hide the default;  
    84. }  
    85. </script>   
    86.     </div>  
    87. </body>  
    88. </html>  
     

    Regards,

     

    Ken 
View as RSS news feed in XML