关于bootstrap fileupload上传插件的使用

初始化：

    该插件必须在调用jQuery后才引用bootstrap后才可引用(注意字体样式脚本要在fileinput.min.js后引用)。

一、引用代码

<script src="../../Scripts/fileinput/fa.js" type="text/javascript"></script>
<script src="../../Scripts/fileinput/purify.min.js" type="text/javascript"></script>
<script src="../../Scripts/fileinput/sortable.min.js" type="text/javascript"></script>
<script src="../../Scripts/fileinput/fileinput.js" type="text/javascript"></script>
<script src="../../Scripts/fileinput/LANG.js" type="text/javascript"></script>
<script src="../../Scripts/fileinput/theme.min.js" type="text/javascript"></script>
<link href="../../Scripts/fileinput/fileinput.min.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/fileinput/fileinput.min.js" type="text/javascript"></script>

引入成功后，HTML的代码

<div class="item form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">
                    文件地址</label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
                </div>
            </div>

二、下来是初始化控件，js文件中

$(function () {
            //0.初始化fileinput
            var oFileInput = new FileInput();
            oFileInput.Init("txt_file", "@Url.Action("ImportOrder", "Portal", new { area = "ServerMQManagerMgr" })");
        });



        //初始化fileinput
        var FileInput = function () {
            var oFile = new Object();
            //初始化fileinput控件（第一次初始化）
            oFile.Init = function (ctrlName, uploadUrl) {
                var control = $('#' + ctrlName);


                //初始化上传控件的样式
                control.fileinput({
                    language: 'zh', //设置语言
                    uploadUrl: uploadUrl, //上传的地址
                    allowedFileExtensions: ['zip'], //接收的文件后缀
                    showUpload: true, //是否显示上传按钮
                    showCaption: false, //是否显示标题
                    browseClass: "btn btn-primary", //按钮样式 
                    //dropZoneEnabled: false,//是否显示拖拽区域
                    //minImageWidth: 50, //图片的最小宽度
                    //minImageHeight: 50,//图片的最小高度
                    //maxImageWidth: 1000,//图片的最大宽度
                    //maxImageHeight: 1000,//图片的最大高度
                    //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                    //minFileCount: 0,
                    maxFileCount: 1, //表示允许同时上传的最大文件个数
                    enctype: 'multipart/form-data',
                    validateInitialCount: true,
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
                });



                //导入文件上传完成之后的事件
                $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
                    var IsError = data.response.IsError;
                    if (IsError == false) {
                   var file= eval('(' + data.response.Data + ')');
                   $("#FileAddress").val(file.SavePath);
                    $("#FileName").val(file.fupName);
                        return;
                    }
                });
            }
            return oFile;
        };

三、后台上传（ UploadSeehealtFile方法是由自己整理的）

 /// <summary>
        /// 文件上传
        /// </summary>
        /// <returns></returns>
        public JsonResult ImportOrder()
        {
            var oFile = System.Web.HttpContext.Current.Request.Files["txt_file"];

            string SavePath = "~/UploadFiles/";
            UploadHelper up = new UploadHelper();
            up.PostedFile = oFile;//文件流
            up.SavePath = SavePath;
            up.SaveNameType = UploadHelper.SaveFileNameType.Random;

            string fupName = oFile.FileName;
            int i = fupName.LastIndexOf("."); //取得文件名中最后一个"."的索引
            string newext = fupName.Substring(i); //获取文件扩展名
            up.SaveNameNotExt = fupName.Split('.')[0];
            up.FileNameNoExt = ".zip";
            up.UploadSeehealtFile();

            return Json(AjaxResult.Success("{'SavePath':'" + SavePath + "','fupName':'" + fupName + "'}", "保存成功"));
        }

整理的初始化的参数：

• showCaption：是否显示文件的标题。默认值true。
• showPreview：是否显示文件的预览图。默认值true。
• showRemove：是否显示删除/清空按钮。默认值true。
• showUpload：是否显示文件上传按钮。默认是submit按钮，除非指定了uploadUrl属性。默认值true。
• showCancel：是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。
• captionClass：在标题容器上额外的class。类型string。 
• previewClass：在预览区域容器上的额外的class。类型string。
• mainClass：添加在文件上传主容器。类型string。
• initialDelimiter：在initialPreview属性中用于上传多个文件时的分隔符。默认值：'*$$*'。
• initialPreview：类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串，会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。
allowedPreviewTypes : [ 'image' ],
allowedFileExtensions : [ 'jpg', 'png', 'gif' ], 
maxFileSize : 2000,