推荐一个很好的文件上传插件 bootstrap-fileinput ，后台使用的C#语言_.NET

您所在的位置：程序员俱乐部 > 编程开发 > .NET > 推荐一个很好的文件上传插件 bootstrap-fileinput ，后台使用的C#语言

推荐一个很好的文件上传插件 bootstrap-fileinput ，后台使用的C#语言

2017/8/3 23:31:16 名字怪难起程序员俱乐部我要评论(0)

摘要：官方教程：http://plugins.krajee.com/file-input#ajax-uploads下载官方Demo后，引用样式和js文件，此项目是将所有的文件放在一个文件下<body><form><div><divclass="modal-header"><h4class="modal-title"id="modalShow">[请选择xml/docx]文件</h4></div><
标签：C# file 使用上传文件插件一个

官方教程：http://plugins.krajee.com/file-input#ajax-uploads

下载官方Demo后，引用样式和js文件，此项目是将所有的文件放在一个文件下

图片上传所需引用的文件

class="code_img_closed" src="/Upload/Images/2017080323/0015B68B3C38AA5B.gif" alt="">

<body>
    <form>
        <div>
            <div class="modal-header">
                <h4 class="modal-title" id="modalShow">[请选择xml/docx]文件</h4>
            </div>
            <div class="modal-body">
                <input type="file" name="model_file" id="model_file" multiple class="file-loading" />
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            var control = $("#model_file");
            var uploadrul = "/bootstrap-fileinput-master/examples/UploadFile.ashx";
            var upObj = {
                language: 'zh', //设置语言
                uploadUrl: uploadrul, //上传的地址
                uploadExtraData: { "savepath": "/bootstrap-fileinput-master/examples/" },//上传至服务器的参数，非常重要
                allowedFileExtensions: ['xml', 'docx', 'jpg', 'png', 'gif', 'rar', 'doc'],//接收的文件后缀
                showUpload: true, //显示批量上传按钮
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: true,//是否显示拖拽区域
                maxFileSize: 4096,//单位为kb，如果为0表示不限制文件大小
                minFileCount: 0,
                maxFileCount: 10,
                msgSizeTooLarge: " \"{name}\" 大小为({size} KB) 最大文件大小为 {maxSize} KB.请重新上传!",//文件的实际大小有些许偏差
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                allowedPreviewTypes: ['image']//能够预览的文件类型，如果不限制。文件预览时可能很慢
            };
            $('#modalShow').html("[请选择"+upObj.allowedFileExtensions+"]文件");
            control.fileinput(upObj);
            
            //导入文件上传成功之后的事件
            $("#model_file").on("fileuploaded", function (event, data, previewId, index) {

            });
            //导入文件上传失败之后的事件
            $('#model_file').on('fileuploaderror', function (event, data, msg) {
                var msg= data.response;
            });
        });
    </script>
</body>

logs_code_collapse">前台代码

 1     /// <summary>
 2     /// UploadFile 的摘要说明
 3     /// </summary>
 4     public class UploadFile : IHttpHandler
 5     {
 6 
 7         public void ProcessRequest(HttpContext context)
 8         {
 9             string json = "{\"msg\":\"上传成功!\"}";
10             try
11             {
12                 context.Response.ContentType = "text/plain";
13                 Stream sr = context.Request.InputStream;
14                 byte[] bt = new byte[sr.Length];
15                 HttpPostedFile file = context.Request.Files["model_file"];
16                 string savepath = context.Request["savepath"];//获取文件保存的路径
17                 string fileName = file.FileName;
18                 sr.Read(bt, 0, bt.Length);
19                 savepath = context.Server.MapPath(savepath) + "\\" + fileName;
20                 FileStream fs = new FileStream(savepath, FileMode.Create);
21                 fs.Write(bt, 0, bt.Length);
22                 fs.Close();
23                 sr.Close();
24             }
25             catch (Exception ex)
26             {
27                 //失败时返回的参数必须加 error键
28                 json = "{\"error\":\""+ex.Message+"\"}";
29             }
30             context.Response.Write(json);
31             context.Response.End();
32         }
33 
34         public bool IsReusable
35         {
36             get
37             {
38                 return false;
39             }
40         }
41     }