关于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,