文件批量上傳組件分享（C# asp.net Ajax）上傳圖片

在很多系統里，上傳附件是非常重要的一個功能，些功能是接口方式開發的，系統集成非常方便，只需要簡單實現接口，相關配制，頁面引入相關腳本。

1.  接口定義

 
           public  
           interface IMultiFilesInterface 
           
 { 
           
     MultiFileEntity Insert(HttpPostedFile file,  
           string folder,  
           string modulName,  
           string tableIndentityId); 
           
     
           void DeleteByFileId( 
           int FileId); 
           
     List<MultiFileEntity> GetListBy( 
           string module,  
           string tableIdentityId); 
           
 } 
          

2. 自行實現實現接口
3. 配制文件

                <configSections> 
           
         <section name= 
           " 
           castle 
           " type= 
           " 
           Castle.Windsor.Configuration.AppDomain.CastleSectionHandler, Castle.Windsor 
           "/>         
           
     </configSections> 
           
     <castle> 
           
         <components> 
           
             <component id= 
           " 
           IMultiFilesInterface 
           " service= 
           " 
           MultiFilesUpload.Plugins.MultiFilesUpload.IMultiFilesInterface, MultiFilesUpload 
           " type= 
           " 
           你的實現類, 組件名 
           （dll名）"/> 
           
         </components> 
           
     </castle> 
          

4. 頁面插入代碼
   

                引入相關腳本，和樣式 
               
   <script src= 
               " 
               Plugins/jquery-1.4.2.min.js 
               " type= 
               " 
               text/javascript 
               "></script> 
               
   <script src= 
               " 
               Plugins/MultiFilesUpload/jquery.uploadify.v2.1.4.min.js 
               " type= 
               " 
               text/javascript 
               "></script> 
               
   <link href= 
               " 
               Plugins/MultiFilesUpload/uploadify.css 
               " rel= 
               " 
               stylesheet 
               " type= 
               " 
               text/css 
               " /> 
               
   <script src= 
               " 
               Plugins/MultiFilesUpload/swfobject.js 
               " type= 
               " 
               text/javascript 
               "></script> 
               
   <link href= 
               " 
               Plugins/MultiFilesUpload/multifilesupload.css 
               " rel= 
               " 
               stylesheet 
               " type= 
               " 
               text/css 
               " /> 
               
   <script src= 
               " 
               Plugins/MultiFilesUpload/multifilesupload.js 
               " type= 
               " 
               text/javascript 
               "></script> 
               
   腳本： 
               
    
               
                  $(document).ready(function() { 
                
               MulFileUploadifyInit( 
                
               { 
                
                   'ModuleName': "News", 
                
                   'TableIdentityId': "abcidoaere123adf", 
                
                   'ULID': "ShowListPic", 
                
                   'UpdateLoadFloader': "/upload/projectfiles/", 
                
                   'UploadFileControlId': "File1", 
                
                   'UploadFileQuensId': "Div1" 
                
               }); 
                
    
                
    
                
               MulFileUploadifyInit( 
                
               { 
                
                   'ModuleName': "project", 
                
                   'TableIdentityId': "123", 
                
                   'ULID': "ShowListPic", 
                
                   'UpdateLoadFloader': "/upload/projectfiles/", 
                
                   'UploadFileControlId': "File2", 
                
                   'UploadFileQuensId': "Div2" 
                
               }); 
                
           });       
               頁面代碼： 
              

    

                <div>     
               
           <input id="File1" type="file" /> 
               
           <div id="Div1"></div> 
               
       </div>     
               
       <div> 
               
           <input id="File2" type="file" /> 
               
           <div id="Div2"> 
               
           </div> 
               
       </div> 
              

    

    

    

   
   
5. 效果
   上傳中。。。
   
   
    上傳完。。
   
   點擊刪除
   
   

可以訪問頁面：http://www.hkideals.com/uploadtest.aspx  測試效果