标签：接收 ons multiple oca color XML style ror multipart
使用bootstrap-fileinput
使用方式：
1.nuget:Install-Package bootstrap-fileinput
2.语言本地化｛下载fileinput_locale_zh.js｝或者修改Fileinput中的本地化词汇
3.文件大小限制：修改fileinput.js中的3195行 maxFilePreviewSize配置节点
示例：前台
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/bootstrap.js"></script> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <script src="~/Scripts/fileinput.js"></script> <script src="~/Scripts/fileinput_locale_zh.js"></script> <link href="~/Content/bootstrap-fileinput/css/fileinput.css" rel="stylesheet" /> <script type="text/javascript"> $(function () { var control = $("#txt_file"); var uploadrul = "/Home/UploadFile"; control.fileinput({ language: ‘zh‘, //设置语言 uploadUrl: uploadrul, //上传的地址 allowedFileExtensions: [‘xml‘,‘docx‘],//接收的文件后缀 showUpload: true, //显示批量上传按钮 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: true,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 //maxImageHeight: 1000,//图片的最大高度 //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小 //minFileCount: 0, maxFileCount: 100, 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) { }); }); </script> </head> <body> <div> <form> <div> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">[请选择xml/docx]文件</h4> </div> <div class="modal-body"> <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> </div> </div> </form> </div> </body> </html>
后台：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.IO; using System.Xml; using System.Xml.Schema; namespace UploadTest.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public JsonResult UploadFile() { uploadResult result = new uploadResult(); var oFile = Request.Files["txt_file"]; result.fileName = oFile.FileName; Stream sm = oFile.InputStream; byte[] bt= new byte[sm.Length]; sm.Read(bt, 0, (int)sm.Length); FileStream fs = new FileStream(AppDomain.CurrentDomain.BaseDirectory+oFile.FileName,FileMode.Create); fs.Write(bt, 0, bt.Length); fs.Close(); fs.Dispose(); sm.Close(); sm.Dispose(); return Json(result, JsonRequestBehavior.AllowGet); } public class uploadResult { public string fileName { get; set; } public string error { get; set; } } } }
为了在前台正确的显示文件的错误信息，需要给前台返回一个带有error字段的json，其中error字段时必须的，否则无法显示后台回写的错误消息
后台可以做到更细致的控制，并且支持多线程上传。
标签：接收 ons multiple oca color XML style ror multipart
原文地址：http://www.cnblogs.com/zzfstudy/p/6339409.html
