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


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

  1.  接口定義
  2. public  interface IMultiFilesInterface
    {
        MultiFileEntity Insert(HttpPostedFile file,  string folder,  string modulName,  string tableIndentityId);
        void DeleteByFileId( int FileId);
        List<MultiFileEntity> GetListBy( string module,  string tableIdentityId);
    }
  3. 自行實現實現接口
  4. 配制文件
  5.     <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>
  6. 頁面插入代碼
    引入相關腳本,和樣式
    <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>
     

     

     


  7. 效果
    上傳中。。。
     上傳完。。

    點擊刪除

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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM