H5单张、多张图片保存续篇
前言
这篇是接上篇内容。还没看的可以看H5单张、多张图片上传这篇文章预热。
图片入库
本章我们就来看看如何让多种图片保存至数据库中。数据库:mysql 后端:.NET Core
我们回顾一下上篇我们给出的Html结构
<form method="post" class="form-horizontal submitClubData auto-refresh" enctype="multipart/form-data" asp-action="UpdateClubs">
<div class="row">
<div class="col-xs-10 col-sm-8 mTop5">
<label title="上传俱乐部相册" for="ClubImagesUpload" id="btnClubImg" class="col-sm-2"><input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">
<img src="/Images/registerNewSite/btn_addimg.png" class="addImg"/>
</label>
</div>
</div> <div class="row">
<div class="col-xs-9">
<div id="clubInputImagePreview" class="col-sm-9 img-preview img-preview-sm"></div>
</div>
</div>
<form/>
首先,我们肯定的有个数据表 用于存储我们的imgage信息。给用于存储二进制的字段命名image
注意image类型为mediumblob。这几种类型的区别是存储容量的大小:
MySQL的四种BLOB类型
类型 大小(单位:字节)
TinyBlob 最大 255
Blob 最大 65K
MediumBlob 最大 16M
LongBlob 最大 4G
接着,我们需要定义实体Model
/// <summary>
/// add club images
/// </summary>
public IList<IFormFile> ClubImagesUpload { get; set; }
然后是进行表单提交 注意type=submit
$(".submitClubData").submit(function (e) {
var layerMsg = layer.load(1,
{
icon: 1,
shade: [0.3]
});
e.preventDefault(); var form = $(this);
var url = form.attr('action');
var formData = new FormData(this);
var refresh = form.hasClass('auto-refresh'); $.ajax({
type: "POST",
url: url,
data: formData,
contentType: false,
processData: false,
success: function (data) {
layer.closeAll();
if (data.isSuccess) {
layer.msg('保存成功');
if (refresh) {
window.setTimeout(function () { location.reload() }, 1000);
} else {
form.find('.close_model_button').click();
}
} else {
layer.msg(data.failMessage);
}
}
}); });
然后 通过表单提交了,我们就可以将页面数据以对象形式post至控制器中:
public async Task<IActionResult> UpdateClubs(实体类 model)
{
OperationResult result=new OperationResult(); model.ClubsImageData = ThumbnailListImageData(model.ClubImagesUpload, , );//将FormFile文件转换为byte数组 result.IsSuccess = await _crewManager.UpdateClub(model);
return result;
} private List<byte[]> ThumbnailListImageData(IList<IFormFile> files, int width, int height)
{
List<byte[]> result=new List<byte[]>();
if ((files == null) || (files.Count == ))
{
return null;
} Parallel.ForEach(files.Take(), new ParallelOptions() {MaxDegreeOfParallelism = }, item =>
{
try
{
if ((item != null) && (item.Length > ))
{
using (var stream = new MemoryStream((int)item.Length))
{
item.CopyTo(stream);
var source = Image.FromStream(stream);
var thumbnail = source.GetThumbnailImage(width, height, ThumbnailCallback, IntPtr.Zero);
using (var outputStream = new MemoryStream())
{
thumbnail.Save(outputStream, System.Drawing.Imaging.ImageFormat.Png);
result.Add(outputStream.ToArray()); }
}
}
}
catch (Exception e)
{
_logger.LogError($"ThumbnailListImageData Error:{e.Message}");
throw;
}
});
return result;
}
通过这个控制器,我们得到了存有byte的图片集合,现在,我们只需要将这些图片放入数据库中即可
public async Task<bool> UpdateClub(int regattaId, 实体集合clubDetail)
{
var flag = false;
using (var conn = GetMySqlConnection(regattaId))
{ if (conn.State == ConnectionState.Closed)
{
await conn.OpenAsync();
} using (var transaction = conn.BeginTransaction())
{
try
{
//因为前台有队上传图片个数有限制,所以数量不多,这里我们直接使用循环插入的方式
foreach (var item in clubDetail.ClubsImageData)
{
const string sqlFour =
@"insert into clubinfo_image(clubinfo_id,image,isvalid) values(@clubInfoId,@clubimage,@_isvalid);
select max(id) from clubinfo_image;";
var clubimageMaxId = (await conn.QueryAsync<int>(sqlFour, new
{
clubInfoId = clubInfoId,
clubimage = item,
_isvalid = true,
}, commandType: CommandType.Text)).FirstOrDefault();
}
transaction.Commit();
flag = true;
return flag;
}
catch (Exception ex)
{
_logger.LogError($"UpdateClub Error :{ex.Message}");
transaction.Rollback();
throw;
} }
}
}
效果演示
温馨提示
如果是编辑,要读取数据库中这些byte数据,只需要通过
Convert.ToBase64String(club.ImageData)//将byte转换为Base64位字符串
如果有多张图片,可以用一个List<string>存放,然后再前台依次展示即可:
<div class="row">
<div class="col-xs-9">
@foreach (var item in Model.ClubImageDataBase64)
{
<div id="clubInputImagePreview" class="col-sm-9 img-preview img-preview-sm" style="background-image: url('data:image/png;base64,@item');></div>
}
</div>
</div>
展示效果:
本文完~
H5单张、多张图片保存续篇的更多相关文章
- H5单张、多张图片上传
前言 今天我们聊一聊图片上传,单张Or多张 ,如今,各大图片上传插件数不胜数,例如:Jquery的 verupload.js,jQuery File Upload.Uploadify.jQuery.f ...
- js-jssdk微信H5选择多张图片预览并上传(兼容ios,安卓,已测试)
值得注意的是: 1.在微信H5中选择图片运用:wx.chooseImage,成功后返回: res.localIds用于上传图片使用 上传图片:wx.uploadImage. 2.上传图片的时候 ...
- iOS 多张图片保存到相册问题(add multiple images to photo album)
不知道朋友们有木有做过多图保存到系统的相册这个需求,我在用`UIImageWriteToSavedPhotosAlbum`保存图片时候,在代理回调方`didFinishSavingWithError` ...
- Volley-XUtils-OkHttp三种方式实现单张多张图片上传
OkHttp可以作为Volley底层传输协议,速度更快,传大量图片建议使用.OkHttp更多功能请看OkHttp的使用 xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更 ...
- H5转图片支持保存
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- .Net之使用Jquery Ajax通过FormData对象异步提交图片文件到服务端保存并返回保存的图片路径
前言: 首先对于图片上传而言,在我们的项目开发中可以说出现的频率是相当的高的.这篇文章中,我将要描述的是在我们.Net中如何使用Jquery Ajax通过FormData对象异步提交图片文件到后台保存 ...
- h5视频上传之前端视频压缩研究
今天领导接到一个h5上传手机视频的需求,主要是要看用户在这个视频中有没有完成某个任务,比如投篮进了几个球. 但是由于手机拍摄的视频文件大小有点大,直接上传的话,用户流量顶不住,而且特别耗时,在这样的情 ...
- (六) Keras 模型保存和RNN简单应用
视频学习来源 https://www.bilibili.com/video/av40787141?from=search&seid=17003307842787199553 笔记 RNN用于图 ...
- Keras入门(二)模型的保存、读取及加载
本文将会介绍如何利用Keras来实现模型的保存.读取以及加载. 本文使用的模型为解决IRIS数据集的多分类问题而设计的深度神经网络(DNN)模型,模型的结构示意图如下: 具体的模型参数可以参考文章 ...
随机推荐
- JAVA未来前景还能持续多久
有很多人一直在说JAVA现在已经饱和了,已经没有必要学Java,程序员已经是严重过剩,行业人才竞争状况更是恶性的之类的云云.现实真是这样嘛? Java目前现状 首先,Java的应用可以说是无处不在,从 ...
- SpringBoot开发案例从0到1构建分布式秒杀系统
前言 最近,被推送了不少秒杀架构的文章,忙里偷闲自己也总结了一下互联网平台秒杀架构设计,当然也借鉴了不少同学的思路.俗话说,脱离案例讲架构都是耍流氓,最终使用SpringBoot模拟实现了部分秒杀场 ...
- Python接口测试之对MySQL/unittest框架/Requests 的操作
单元测试支持测试自动化. 共享的安装程序和关闭代码测试. 聚合成集合,测试和报告框架从测试的独立性.单元测试模块提供可以很容易地支持这些素质的一组测试的类.关于unittest 测试框架建议可以到官方 ...
- 第一章:Netty介绍
1. Netty介绍 Netty是一款异步的事件驱动的网络应用程序框架,支持快速地开发可维护的高性能的面向协议的服务器和客户端,Netty是基于NIO实现的,所以整个Netty都是异步操作,网络应用 ...
- SSM-MyBatis-03:Mybatis中简单的整合日志
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥-------------简单的整合日志,首先提供俩种方式,log4j和logback简单的说一下logback,他由log4j的原作者编 ...
- PHP生成腾讯云COS请求签名
目标 使用 PHP 创建 COS 接口所需要的请求签名 步骤 按照官方示例(也许是我笨,我怎么读都觉得官方文档结构费劲,示例细节互相不挨着,容易引起歧义),请求签名应用在需要身份校验的场景,即非公有读 ...
- DropZone(文件上传插件)
1. html文件 dropzone的原理是模拟表单来上传文件,html中的元素有多重形式. 可以建立一个form表单: <form id="dropz" action=&q ...
- synchronized(this) 与synchronized(class) 之间的区别
一.概念 synchronized 是 Java 中的关键字,是利用锁的机制来实现同步的. 锁机制有如下两种特性: 互斥性:即在同一时间只允许一个线程持有某个对象锁,通过这种特性来实现多线程中的协调机 ...
- 5.两分钟让你明白app后端有啥用
app后端,也称为app后台,称呼不一样,但指的是同一个东西. 我一直都以app后端有啥用这个问题不用解释.但在网络上,有准备进行app创业的网友(是从传统行业过来的)问过这个问题,我这里就以app后 ...
- Android 进阶 教你打造 Android 中的 IOC 框架 【ViewInject】 (上)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39269193,本文出自:[张鸿洋的博客] 1.概述 首先我们来吹吹牛,什么叫Io ...