Loading...

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

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

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

 

图片上传所需引用的文件

 

<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>
前台代码
 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     }
一般处理程序-后台代码

  • 上传效果图，支持不同类型的文件同时上传，支持图片预览。很不错吧……

 

 

 

 

 

 

 

 

 

 

     下载地址：  https://github.com/cmdknife/fileUpload

posted @ 2017-08-03 22:00  名字怪难起  阅读(6027)  评论(1)  编辑  收藏  举报