一、bootstrap-upload
一、bootstrap-upload
前端代码:
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/css/fileinput.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/js/fileinput.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/css/fileinput-rtl.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.5.1/img/loading-sm.gif">
</head>
<body>
<div class="container">
<h2>模态框实例</h2>
<!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">文 件 上 传</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
<div class="col-sm-12">
<input id="input-id" name="file" multiple type="file" data-show-caption="true">
</div>
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
initFileInput("input-id");
})
function initFileInput(ctrlName) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: "/UploadPack/Uploadurl", //上传的地址
allowedFileExtensions: ['ipa', 'jpg', 'gif', 'png', 'doc', 'docx', 'pdf', 'ppt', 'pptx', 'txt'],//接收的文件后缀
maxFilesNum: 5,//上传最大的文件数量
//uploadExtraData:{"id": 1, "fileName":'123.mp3'},
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove: true, //显示移除按钮
showPreview: true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: true,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
//maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
}).on('filepreupload', function (event, data, previewId, index) { //上传中
console.log(data)
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
console.log('文件正在上传');
}).on("fileuploaded", function (event, data, previewId, index) { //一个文件上传成功
console.log('文件上传成功！' + data.id);
}).on('fileerror', function (event, data, msg) { //一个文件上传失败
console.log('文件上传失败！' + data.id);
})
}
</script>
</body>
</html>
下面说明使用Core坑
一、基于Core的获取文件上传
1、（List<IFormFile> files）
前端代码:
后台代码:
2、（[FromForm(Name = "file")] List<IFormFile> files）
[HttpPost]
public async Task<IActionResult> Uploadurl([FromForm(Name = "file")] List<IFormFile> files) //上传图片
{
if (files.Count > )
{
string path = Path.Combine(Environment.CurrentDirectory, "Upload", DateTime.Now.ToString("yyyy-MM-dd"));
if (!System.IO.Directory.Exists(path))//判断上传路径是否存在
{
System.IO.Directory.CreateDirectory(path);
} string filePath = string.Empty;
string fileName = string.Empty;
foreach (var formFile in files)
{
if (formFile.Length > )
{
string fileFormat = System.IO.Path.GetExtension(formFile.FileName);//获取文件后缀格式
fileName = Guid.NewGuid().ToString("n") + fileFormat;
filePath = Path.Combine(path,fileName);//中间处理为唯一格式文件
using (var stream = new FileStream(filePath, FileMode.Create))
{
try
{
//保存文件
await formFile.CopyToAsync(stream);
}
catch (Exception ex)
{
return Json(new { Status = , Message = "保存失败" });
} }
}
}
return Json(new { Status = , Message = "保存成功" });
}
else
{
return Json(new { Status = , Message = "上传文件为空!" });
} }
二、基于MVC的获取文件上传
[HttpPost]
public ActionResult Uploadurl(HttpPostedFileBase file) //上传图片
{
Basics basics = new Basics(); if (basics.SaveFiles(file))
{
return Json(new { Status=, Message = "保存成功"}, "text/html", JsonRequestBehavior.AllowGet);
}
else {
return Json(new { Status = , Message = "保存失败" }, "text/html", JsonRequestBehavior.AllowGet);
}
}
封装方法
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web; // namespace Common
{
public class Basics
{
public bool SaveFiles(HttpPostedFileBase file)
{
try
{
var Filename = file.FileName;
string SavePath = "../Uploads/";
string _Filename = DateTime.Now.ToString("yyyyMMddhhmmss") + Filename;
//保存
//Server.MapPath()的全名是System.Web.HttpContext.Current.Server.MapPath()
file.SaveAs(System.Web.HttpContext.Current.Server.MapPath(SavePath + _Filename)); }catch
{
return false;
}
finally { } return true; }
}
}
一、bootstrap-upload的更多相关文章
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- 包含修改字体，图片上传等功能的文本输入框-Bootstrap
通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...
- 分享基于EF+MVC+Bootstrap的通用后台管理系统及架构
基于EF+MVC+Bootstrap构建通用后台管理系统,集成轻量级的缓存模块.日志模块.上传缩略图模块.通用配置及服务调用, 提供了OA.CRM.CMS的原型实例,适合快速构建中小型互联网及行业 ...
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...
- 30 个惊艳的 Bootstrap 扩展插件
Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...
- GitHub托管BootStrap资源汇总（持续更新中…）
Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...
- 推荐13款优秀的Twitter Bootstrap JavaScript插件
Bootstrap是基于HTML,CSS和JavaScript的简洁灵活的流行前端框架及交互组件集,由微博先驱Twitter在2011年8月开源的整套前端解决解决方案,拥有非常完备和详尽的开发文档,有 ...
- 基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
- jQuery File Upload 单页面多实例的实现
jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...
随机推荐
- luogu【P1024 一元三次方程求解】题解
题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...
- 洛谷P3373 【模板】线段树 2 && P2023 [AHOI2009]维护序列——题解
题目传送: P3373 [模板]线段树 2 P2023 [AHOI2009]维护序列 该题较传统线段树模板相比多了一个区间乘的操作.一提到线段树的区间维护问题,就自然想到了“懒标记”:为了降低时间复 ...
- TCP服务器并发编程构架：完成端口IOCP模式
windows下socket网络编程模式:IOCP 完成端口 1)IOCP异步事件的获取放到操作系统的网络驱动层来处理,实际上反而是降低了编程难度, 2)同时对于多线程的并发调度,也放到操作系统级别来 ...
- WEB Fuzz中需要关注的7种响应
WEB应用模糊测试(WEB Fuzz)是一种特殊形式的网络协议模糊测试,专门关注遵循HTTP规范的网络数据包. WEB Fuzz并不是新的概念,目前有多种WEB应用模糊测试器(WEB Fuzzer), ...
- TestingWhiz社区版2013版下载地址
TestingWhiz社区版 https://sourceforge.net/projects/testingwhiz-community-edition/ https://sourceforge.n ...
- cdn for js library
https://cdnjs.com/libraries/jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js htt ...
- hypermesh中怎么设置支反力（反作用力）
Analysis page >> Control cards >> Global output request 勾选 SPCF 和 GPFORCE .
- 模拟赛DAY1 T1大美江湖
这就是一个模拟题,注意1234分别对应左右上下横坐标和纵坐标的判断就好了 题解: 需要注意的是,向上取整ceil函数是对于一个double值返回一个double值,也就是说在ceil里面的类型一定要是 ...
- 关于linux中移动目录和到指定目录和移动目录中的数据到指定目录
#这里表示将目录node-v12.13.1-linux-x64移动到/usr/local/中重命名为node,所以node目录可以不存在[root@alone ~]# mv node-v12.13.1 ...
- Vue实现音乐播放器（二）-Vue-cli脚手架安装