bootstrap fileinput 文件上传

引用：

<link href="../js/bootstrap-fileinput/css/fileinput_locale_zh.js" rel="stylesheet" /> 这个是显示中文

html 打开模态框：

<span class="btn btn-default" onclick="openmodel()">
                            <i class="glyphicon glyphicon-open"></i>
                            上传文件
                        </span>

模态框文件上传：

              <div id="myModal1_parent">
                    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="width: 100%">
                    <div class="modal-dialog" role="document" style="width: 90vw;">
                        <div class="modal-content" style="width: 100%">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true" >&times;</span></button>
                                <h4 class="modal-title" id="H1">上传文件</h4>
                            </div>

                            <div class="modal-body" style="max-height: 60vh; overflow-y: auto;">
                                <div class="form-group">
                                    <span class="file-input">

                                        <div class="kv-upload-progress hide">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-group ">

                                            <div class="input-group-btn">

                                                <button type="button" title="Abbruch laufenden Hochladen" class="btn btn-default fileinput-cancel fileinput-cancel-button hide"><i class="glyphicon glyphicon-ban-circle"></i>Laden</button>

                                                <div class="btn btn-file" style="width: 100%">

                                                    <input id="file-4" type="file" name="reportFile" multiple class="file-loading" />
                                                </div>
                                            </div>
                                        </div>
                                    </span>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal" ">
                                    关闭</button>
                            </div>
                        </div>
                    </div>
                </div>
                </div>

js代码

 function openmodel() {
            $(".clearfix").html("");
            $("#myModal1").modal("show");
            var oFileInput = new FileInput();
            oFileInput.Init("file-4", 'FileUpload.ashx');
        }
        
        //初始化fileinput  
        var FileInput = function () {
            var oFile = new Object();
            oFile._imgCount = 0;
            oFile._imgData = [];

            //初始化fileinput控件（第一次初始化）  
            oFile.Init = function (ctrlName, uploadUrl) {
                var control = $('#' + ctrlName);
                //初始化上传控件的样式  
                control.fileinput({
                    language: 'zh',                                         //设置语言  
                    uploadUrl: uploadUrl,                                   //异步路径
                    uploadExtraData: { "savepath": "/project_file/" },//上传的地址  
                    // allowedFileExtensions: ['jpg', 'gif', 'png', 'pdf'],    //接收的文件后缀  
                    showUpload: true,                                       //是否显示上传按钮  
                    showCaption: true,                                     //是否显示标题  
                    maxFileSize: 0,                                          //文件大小，单位为kb，如果为0表示不限制文件大小  
                    showPreview: true,                                     //展前预览  
                    browseClass: "btn btn-primary",                         //按钮样式       
                    maxFileCount: 10,                                       //表示允许同时上传的最大文件个数  
                    enctype: 'multipart/form-data',
                    validateInitialCount: true,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                    //uploadExtraData: function (previewId, index) {           //传参  
                    //    var data = {
                    //        //"reportGroupId": $('#lbl_groupId').html(),      //此处自定义传参  
                    //    };
                    //    return data;
                    //}

                });
                $("#file-4").on("fileuploaded", function (event, data, previewId, index) {
                    
                });
                //异步上传错误结果处理
                $('#file-4').on('fileerror', function (event, data, msg) {

                });
            }
            return oFile;
        };

后台代码 C# 一般处理程序FileUpload.ashx：

   public void ProcessRequest(HttpContext context)
    {
     string json = "";
        HttpPostedFile file = context.Request.Files["reportFile"];
        if (file == null)
        {
            context.Response.Write("{\"error\":\"请重新选择图片！\"}");
            context.Response.End();
            return;
        }
        try
        {            
            DateTime timeNow = DateTime.Now;
            context.Response.ContentType = "text/plain";
            System.IO.Stream sr = context.Request.InputStream;
            byte[] bt = new byte[sr.Length];
             //文件类型
            string fileType = file.FileName.Split('.')[1];
            //文件名字
            Random ran = new Random();
            int RandKey = ran.Next(1000, 9999);
            string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + RandKey.ToString() + "." + fileType;
            string fileNamePrototype = file.FileName;
            //IE兼容性问题
            if (fileNamePrototype.LastIndexOf("\\") > -1)
            {
                fileNamePrototype = fileNamePrototype.Substring(fileNamePrototype.LastIndexOf("\\") + 1);
            }
            //end
            //文件长度，字节
            int fileLength = file.ContentLength;
            fileLength /= 1024;
            //文件大小，KB
            string FileSize = fileLength + "KB";
            sr.Read(bt, 0, bt.Length);
            string url = context.Server.MapPath("/project_file") + "\\" + fileName;
            //文件路径
            string VirtualPath = "../project_file/" + fileName + "";
           
            file.SaveAs(url);//文件的保存
            json = "{\"msg\":\"上传成功!\",\"ImgUrl\":\"" + VirtualPath + "\",\"ImgName\":\"" + fileNamePrototype + "\",\"ImgType\":\"" + fileType + "\",\"ImgSize\":\"" + FileSize + "\"}";
                            
            sr.Close();
        }
        catch (Exception ex)
        {
            //失败时返回的参数必须加 error键
            json = "{\"error\":\"" + ex.Message + "\"}";
        }
       context.Response.Write(json);
        context.Response.End();
    }

posted on 2018-06-07 11:07 土豆不逗阅读(213) 评论(0) 编辑收藏举报