一、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 ...
随机推荐
- Fiddler简介以及web抓包1
一.Fiddler简介 简单来说,Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯.网上简介很多,我们不多说. 二.Fiddler版本 Fiddle ...
- 个推一键认证SDK重磅推出，打造秒级登录体验，让用户一“键”倾心
移动互联网时代,用户注意力的持续时间越来越短,他们追求便捷与高效.从账号密码登录.短信验证,到第三方登录甚至人脸识别登录,APP的注册/登录方式在逐步变化,开发者希望在这重要的交互端口提升用户的体验, ...
- scroll-view组件
<scroll-view></scroll-view> 组件 这个组件的属性:(是要不说属性值,写不写都可以(建议不写)) scroll-x:允许横向滚动 (如果你设这个属性就 ...
- 使用innobackupex基于从库搭建级联从库及一两从
使用innobackupex基于从库搭建mysql主从架构 现有的架构是一主一从,版本为Mysql5.6.37.实施要求是:利用从库,搭建第二个从库,版本为5.7.21 主库:192.168.1.21 ...
- PriorityBlockingQueue 源码分析
PriorityBlockingQueue PriorityBlockingQueue 能解决什么问题?什么时候使用 PriorityBlockingQueue? 1)PriorityBlocking ...
- 数据存储-cookie、sessionstorage、localstorage
HTML5 Web Storage sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的,可以方便的在 web 请求之间保存数据.有了本地 ...
- windows7搭建xmapp部署wordpress
前言 为了学习自动化,在网上搜索资料学习了一下在本机安装xmapp,搭建php环境,本机部署wordpress这个开源项目 内容 主要分成以下几步: 准备安装包,快速安装xmapp 根据实际需求,修改 ...
- [转载]OpenSSL中文手册之命令行详解（未完待续）
声明:OpenSSL之命令行详解是根据卢队长发布在https://blog.csdn.net/as3luyuan123/article/details/16105475的系列文章整理修改而成,我自己 ...
- 【ABAP系列】SAP ABAP中将字符格式的金额转换为数值的函数
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP中将字符格式的金 ...
- day18 时间:time:,日历:calendar,可以运算的时间:datatime,系统:sys, 操作系统:os,系统路径操作:os.path,跨文件夹移动文件,递归删除的思路,递归遍历打印目标路径中所有的txt文件,项目开发周期
复习 ''' 1.跨文件夹导包 - 不用考虑包的情况下直接导入文件夹(包)下的具体模块 2.__name__: py自执行 '__main__' | py被导入执行 '模块名' 3.包:一系列模块的集 ...