一、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 ...
随机推荐
- ionic打包app——以安卓版本为例 辛苦之路~~~
最近同事做了个angular项目,因为要离职,所以项目我就来接手了,用ionic打包app,然后无数配置的坑就等着我了~~~ 环境安装 1.nodejs 因为自己刚接触做angular项目,就更新到了 ...
- Java数据结构与算法(4):二叉查找树
一.二叉查找树定义 二叉树每个节点都不能有多于两个的儿子.二叉查找树是特殊的二叉树,对于树中的每个节点X,它的左子树中的所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项. 二叉查找树节点的 ...
- 高清摄像头MIPI接口与ARM连接【转】
本文转载自:http://www.cnblogs.com/whw19818/p/5811299.html MIPI摄像头常见于手机.平板中,支持500万像素以上高清分辨率.它的全称为“Mobile I ...
- 消息队列之 ActiveMQ
简介 ActiveMQ 特点 ActiveMQ 是由 Apache 出品的一款开源消息中间件,旨在为应用程序提供高效.可扩展.稳定.安全的企业级消息通信. 它的设计目标是提供标准的.面向消息的.多语言 ...
- node.js安装和配置(windows系统)
node.js安装和配置(windows系统) node javasript vscode node是javascript的管理工具,所以开发javasript项目都要下载安装和配置node. 传送 ...
- MySQL5.6transportable tablespace
https://blog.csdn.net/xiaoyi23000/article/details/53150776
- qbzt day6 上午
还是合并石子,但是这次可以任意两个合并,并且求最大异或和 f[s]表示把s所对应的的石子合并为一堆的最小代价 最后求f[2^n-1] 怎么转移? 最后一次也是把两堆合并成一堆,但是会有很多情况,可以枚 ...
- H5 刮图-刮一刮
<!DOCTYPE html><html><head><style>*{margin:0;padding:0} </style></h ...
- leetcode 695 Max Area of Island 岛的最大面积
这个题使用深度优先搜索就可以直接遍历 DFS递归方法: class Solution { public: vector<vector<,},{,-},{,},{,}}; int maxAr ...
- GIt 工作区与暂存区
转载:https://www.liaoxuefeng.com/wiki/896043488029600/897271968352576 工作区与暂存区 工作区(Working Directory) 就 ...