先上效果图
以前找的多文件上传控件总觉得不适合自己的项目,所以
这次找这个简直完美啊,随便怎么用都OK
这个版本的上传插件可扩展性还是不错的 都是通过Ajax上次,用起来感觉还挺不错 不过原版本的样式太大,我直接改源码Js和Css之后才变的小点 后台版本采用的是保存共享文件 使用代码:前台
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <script src="~/Resource/Script/FileUpload/js/jquery.min.js"></script> <link href="~/Resource/Script/BootStrap/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Resource/Script/BootStrap/js/bootstrap.min.js"></script> <link href="~/Resource/Script/FileUpload/css/fileinput.min.css" rel="stylesheet" /> <script src="~/Resource/Script/FileUpload/js/fileinput.min.js"></script> <script src="~/Resource/Script/FileUpload/js/locales/zh.js"></script> </head> <body> <input type="file" multiple id="smallTuBiao" /> <script type="text/javascript"> $(function () { $("#smallTuBiao").fileinput({ language: 'zh', //设置语言 uploadUrl: "/FileUpload/FileUpload", //上传的地址 allowedFileExtensions: ['jpg', 'png', 'gif', 'xls', 'xlsx', 'doc', 'docx', 'txt', 'ppt', 'pptx', 'pdf'],//接收的文件后缀 showUpload: true, //是否显示上传按钮 showCaption: false,//是否显示标题 fileActionSettings: { showUpload: false, showZoom: false }, showAjaxErrorDetails: false, maxFileCount: 10, maxFileSize: 50000, showUploadedThumbs: false, overwriteInitial: false, showClose: false, enctype: 'multipart/form-data', browseClass: "btn btn-primary", //按钮样式 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" //slugCallback: function (filename) { // //这个方法得到文件名字 // return filename.replace('(', '_').replace(']', '_'); //} }); //.on('fileuploaded', function (event, file, previewId, index) { // alert('i = ' + index + ', id = ' + previewId + ', file = ' + file.name); //}); }); </script> </body> </html> 后台处理 using PluginMvc.Lib.Code.Common.Enum; using PluginMvc.Lib.Code.Common.Model.Common; using PluginMvc.Lib.Code.Common.Web; using PluginMvc.Lib.EFDB.ZemtProblemManagementDB.Models; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Transactions; using System.Web; using System.Web.Mvc; using ZemtProblemManagementDB.Business; namespace PluginMvc.FileUpload.Controllers { public class FileUploadController : Controller { // // GET: /FileUpload/ public ActionResult Index(string id) { Session["FDBProblemID"] = id; return View(); } public JsonResult FileUpload() { ResultJson rj = new ResultJson(); try { using (TransactionScope ts = new TransactionScope()) { //打开共享目录 WebCommon.SetNetPostion(); var file = Request.Files[0]; string priblemID = Session["FDBProblemID"].ToString(); TProblemBusiness probleeBusiness = new TProblemBusiness(); var pr = probleeBusiness.GetTProblem(priblemID); DBStateEnum state = DBStateEnum.Normal; if (pr == null) { state = DBStateEnum.Draf; } //新名字 string newFileName = WebCommon.UploadFilePath + Guid.NewGuid() + Path.GetExtension(file.FileName); //保存文件 file.SaveAs(newFileName); //关闭 WebCommon.CancelNetPostion(); //记录到数据库 TAttachment ta = new TAttachment(); ta.CreateTime = DateTime.Now; ta.CreateUserID = new Guid(WebCommon.GetLoginUser().UserID); ta.DBState = Convert.ToInt32(state).ToString(); ta.FileName = file.FileName; ta.FilePath = newFileName; ta.ID = Guid.NewGuid(); ta.TSoruceID = new Guid(priblemID); TAttachmentBusiness fileBusiness = new TAttachmentBusiness(); rj = fileBusiness.Add(ta); ts.Complete(); } } catch (Exception ex) { //关闭共享目录 WebCommon.CancelNetPostion(); rj.Msg = ex.Message; rj.Result = false; } return Json(rj, JsonRequestBehavior.AllowGet); } } }