在本文中,我们将给您介绍关于BootStrapFileInput插件实现多文件上传前端功能的详细内容,并且为您解答bootstrap文件上传控件的相关问题,此外,我们还将为您提供关于.netcore版
在本文中,我们将给您介绍关于BootStrap FileInput 插件实现多文件上传前端功能的详细内容,并且为您解答bootstrap 文件上传控件的相关问题,此外,我们还将为您提供关于.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)、bootstrap File Input 多文件上传插件使用记录(一)配置及批量同步上传、bootstrap File Input 多文件上传插件使用记录(二)删除原文件、Bootstrap Fileinput 4.4.7文件上传实例详解的知识。
本文目录一览:- BootStrap FileInput 插件实现多文件上传前端功能(bootstrap 文件上传控件)
- .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)
- bootstrap File Input 多文件上传插件使用记录(一)配置及批量同步上传
- bootstrap File Input 多文件上传插件使用记录(二)删除原文件
- Bootstrap Fileinput 4.4.7文件上传实例详解
BootStrap FileInput 插件实现多文件上传前端功能(bootstrap 文件上传控件)
总结
以上是小编为你收集整理的BootStrap FileInput 插件实现多文件上传前端功能全部内容。
如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。
.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)
上篇文章给大家介绍了MVC文件上传支持批量上传拖拽及预览文件内容校验功能
本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode
1.导入所需要的包:nuget install bootstrap-fileinput
注意:这里的导包需要在终端导入【需要在wwwroot文件夹下执行nuget命令】如下图
如果发现没有nuget命令,则需要通过apt-get 或者yum 给系统安装nuge包管理工具,这个nuget和vscode中的插件不是一回事
2前台页面编写:
index.cshtml:
@{ ViewData["Title"] = "Home Page"; Layout = null; } <script src="~/jQuery.1.9.0/Content/Scripts/jquery-1.9.0.js"></script> <script src="~/bootstrap.3.3.0/content/Scripts/bootstrap.js"></script> <link rel="stylesheet" href="~/bootstrap.3.3.0/content/Content/bootstrap.css" rel="external nofollow" > <script type="text/javascript" src="~/bootstrap-fileinput.4.3.8/content/Scripts/fileinput.js"></script> <script type="text/javascript" src="~/bootstrap-fileinput.4.3.8/content/Scripts/locales/zh.js"></script> <link rel="stylesheet" href="~/bootstrap-fileinput.4.3.8/content/Content/bootstrap-fileinput/css/fileinput.css" rel="external nofollow" > <script type="text/javascript"> $(function () { var control = $("#txt_file"); var uploadrul = "/Home/UploadFile"; control.fileinput({ language: ''zh'', //设置语言 uploadUrl: uploadrul, //上传的地址 allowedFileExtensions: [''png''],//接收的文件后缀 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: "<iglyphicon glyphicon-king''></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!", }); //导入文件上传完成之后的事件 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { }); }); </script> </table> <div> <form> <div> <div> <h4id="myModalLabel">请选择xml文件</h4> </div> <div> <input type="file" name="txt_file" id="txt_file" multiple/> </div> </div> </form> </div>
基本上和asp.net mvc下边没有区别,只有一个地方需要特别注意一下,外部的script和css文件的引用文件需要放到wwwroot文件中,而不是项目的根目录下。
预览图:
3.主要的区别 ,后台
代码如下:
public JsonResult UploadFile() { uploadResult result = new uploadResult(); try { var oFile = Request.Form.Files["txt_file"]; Stream sm=oFile.OpenReadStream(); result.fileName = oFile.FileName; if(!Directory.Exists(AppContext.BaseDirectory+"/Image/")) { Directory.CreateDirectory(AppContext.BaseDirectory+"/Image/"); } string filename=AppContext.BaseDirectory+"/Image/" + DateTime.Now.ToString("yyyymmddhhMMssss")+Guid.NewGuid().ToString() + ".png"; FileStream fs=new FileStream(filename,FileMode.Create); byte[] buffer =new byte[sm.Length]; sm.Read(buffer,0,buffer.Length); fs.Write(buffer,0,buffer.Length); fs.Dispose(); } catch(Exception ex) { result.error = ex.Message; } return Json(result); } public class uploadResult { public string fileName { get; set; } public string error { get; set; } }
在netcore中无法再通过Request.Files对象来获取从前台传递的文件,这里需要使用Request.Form.Files来获取来自客户端提交的文件,接下来需要一个uploadResult结构体,给前台返回json对象 这个结构中必须包含error字段,用来给前台返回错误数据,详情查看官方文档-官网地址
附一张最终的上传成功保存到本地的图片:
以上所述是小编给大家介绍的.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
- .Net Core实现图片文件上传下载功能
- ASP.NET Core文件上传与下载实例(多种上传方式)
- asp.net core实现文件上传功能
- .NetCore实现上传多文件的示例详解
- 解决ASP.NET Core Mvc文件上传限制问题实例
- asp.net core mvc实现文件上传实例
- asp.net core分块上传文件示例
- NetCore 3.0文件上传和大文件上传的限制详解
bootstrap File Input 多文件上传插件使用记录(一)配置及批量同步上传
总结
以上是小编为你收集整理的bootstrap File Input 多文件上传插件使用记录(一)配置及批量同步上传全部内容。
如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。
bootstrap File Input 多文件上传插件使用记录(二)删除原文件
总结
以上是小编为你收集整理的bootstrap File Input 多文件上传插件使用记录(二)删除原文件全部内容。
如果觉得小编网站内容还不错,欢迎将小编网站推荐给好友。
Bootstrap Fileinput 4.4.7文件上传实例详解
本实例所做功能为发送带附件邮件,可以上传多个附件,操作为选择一个附件以后自动上传,然后继续选择附件,填写完表单其他信息,点击保存发送带附件邮件。
HTML标签
js初始化,设置全局文件名参数
java后台上传文件代码
实际上传操作,返回上传操作经过处理的文件名,保证服务器端文件名唯一
ajax提交其他表单参数和所传附件文件名集合
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小编。
今天的关于BootStrap FileInput 插件实现多文件上传前端功能和bootstrap 文件上传控件的分享已经结束,谢谢您的关注,如果想了解更多关于.net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)、bootstrap File Input 多文件上传插件使用记录(一)配置及批量同步上传、bootstrap File Input 多文件上传插件使用记录(二)删除原文件、Bootstrap Fileinput 4.4.7文件上传实例详解的相关知识,请在本站进行查询。
本文标签: