.net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件
asp.net mvc请移步 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">
<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">
<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: ,
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>
</table>
<div>
<form>
<div>
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">请选择xml文件</h4>
</div>
<div class="modal-body">
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
</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,,buffer.Length);
fs.Write(buffer,,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上传文件的更多相关文章
- mvc文件上传支持批量上传,拖拽以及预览,文件内容校验等
使用bootstrap-fileinput 使用方式: 1.nuget:Install-Package bootstrap-fileinput 2.语言本地化{下载fileinput_locale_z ...
- Sublime、Webstorm等在APICloud平台上全面支持WiFi真机同步和实时预览功能
APICloud工具插件包括APICloud Studio.Sublime Text和Webstorm全面为开发者提供iOS和Android平台真机同步调试功能,不仅可以通过USB方式进行APP真机同 ...
- bootstrap fileinput上传文件
参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974 https://www.cnblogs.com/parker-y ...
- Bootstrap FileInput 上传 中文 API 整理
Bootstrap FileInput 上传 中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看 会用就行 自己都不知道每个值是干嘛用的就问 ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- 浅谈简单实现file控件的图片预览,裁剪和上传。
1.图片预览之FileReader对象 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...
- 预览github项目的html文件新方法
原文地址:→看过来 写在前面 关于如何在线预览github中的html文件,其实这是一个很多人知道的东西,但是查资料的时候呢总是找不到正确的答案,并且一开始我也是踩了坑的. 踩坑经历 搜出来的结果大概 ...
- PHP实现阿里云OSS文件上传(支持批量)
上传文件至阿里云OSS,整体逻辑是,文件先临时上传到本地,然后在上传到OSS,最后删除本地的临时文件(也可以不删,具体看自己的业务需求),具体实现流程如下: 1.下载阿里云OSS对象上传SDK(P ...
随机推荐
- 自动化CodeReview - ASP.NET Core请求参数验证
自动化CodeReview系列目录 自动化CodeReview - ASP.NET Core依赖注入 自动化CodeReview - ASP.NET Core请求参数验证 参数验证实现 在做服务端开发 ...
- Python抓取第一网贷中国网贷理财每日收益率指数
链接:http://www.p2p001.com/licai/index/id/147.html 所需获取数据链接类似于:http://www.p2p001.com/licai/shownews/id ...
- WEB前端性能优化之二——css优化
1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示.HTML规范清 楚指 ...
- PhotoshopCC 如何使用动作文件ATN
非常感谢公司的前端同事,今早给我推荐了一个很好用的插件 atn ,下面简单的总结下 导入 atn 插件的方法: 打开 photoshop 或者 photoshopCC 软件→点击 窗口菜单→找到 动作 ...
- HttpWebRequest 模拟网站登录获取数据
此文档仅仅是一个BaseCode,已做后续查阅 项目使用IBM Platform Symphony分布式平台,所有业务处理都在这个分布式平台上计算,需求是获取这些计算机机群的运行状态,和每一个服务的的 ...
- 了解 : angular $rootScope 在 ui-view
在view 的element 可以直接调用 <p>{{$stateParams.xx}}</p> 要让xx有资料必须注入 app.run["$rootScope&qu ...
- 每天一个linux命令(48)--ln命令
ln是Linux中又一个非常重要的命令,它的功能是为某个文件在另外一个位置建立一个同步的链接,当我们需要在不同的目录,用到相同的文件时,我们不需要在每个需要的目录下都放一个相同的文件,我们只要在某个固 ...
- HTML第二课
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- Sublime Text 3 (Build 3126) 最新注册码
Sublime Text 作为程序员开发神器,听说最新版更新了 并且增加了不少新特性.马上到官网下载了最新版 Sublime Text 3 3126 使用了下,反应速度比以前的确更快了.随手找了几个S ...
- CORS(跨域资源共享)
Cors(Cross-origin Resource Sharing)基本思想是使用自定义的HTTP头部允许浏览器和服务器相互了解对方,从而决定响应成功与否. CORS与JSONP对比: 1.JSON ...