初始化:
该插件必须在调用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,