文件批量上传组件分享（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);
}

自行实现实现接口 配制文件

    <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>

页面插入代码

引入相关脚本，和样式
<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>

 

 

 

效果
上传中。。。

 上传完。。

点击删除

可以访问页面：http://www.hkideals.com/uploadtest.aspx  测试效果

 

 

转载于:https://www.cnblogs.com/sgciviolence/archive/2012/06/10/2543895.html