前言:

  多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解。对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的upload.render方法已经帮我们封装好了,我们只管调用即可,也就是说你选中了几张图片,那么将会向后台请求与图片张数相同的次数,即为遍历提交的方式。

Layui文件/图片样式地址(官方文档):https://www.layui.com/demo/upload.html

一、引入Layui.css和Layui.js:

需要本地项目中存在layui相关样式和js,非网络地址

<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">

<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

当然假如你需要有弹框提示的话,你还需要引入Layer.js

二、前端代码:

Html中的代码:

<li>
<h6>滚动图片:</h6>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">滚动图片上传【推荐上传三张】</button> <button type="button" class="layui-btn layui-btn-danger" onclick="clearAll()"><i class="layui-icon"></i></button>
<input type="hidden" name="ScrollingGraph" id="ScrollingGraph"/>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
</li>

js中的代码:

<script>
layui.use('upload',
function () {
var $ = layui.jquery, upload = layui.upload;
//多图片上传
upload.render({
elem: '#test2',
url: '/FileUpload/FileLoad/',
multiple: true,//允许选择多张图片
before: function (obj) {
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
$('#demo2').append(
'<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">');
});
},
done: function (res) {
if (res.isSuccess == true) {
layer.msg("上传成功");
var scrollingGraph = $("#ScrollingGraph").val();
if (scrollingGraph == "") {
$("#ScrollingGraph").val(res.path);
} else {
scrollingGraph += ',' + res.path;
$("#ScrollingGraph").val(scrollingGraph);
}
console.log(scrollingGraph);
} else {
return layer.msg('上传失败');
}
}
});
}); //清空所有图片
function clearAll() {
layer.confirm("确定要全部清空吗?", {
icon: 3,
btn: ["确定", "取消"],
yes: function (index) {
$("#demo2").html("");
$("#ScrollingGraph").val("");
layer.close(index);
}
});
} </script>

三、服务端接口图片文件流,并保存:

public class FileUploadController : Controller
{
/// <summary>
/// 对验证和处理 HTML 窗体中的输入数据所需的信息进行封装,如FromData拼接而成的文件
/// </summary>
/// <param name="context">FemContext对验证和处理html窗体中输入的数据进行封装</param>
/// <returns></returns>
[HttpPost]
public ActionResult FileLoad(FormContext context)
{
HttpPostedFileBase httpPostedFileBase = Request.Files[];//获取二进制图片文件流
if (httpPostedFileBase != null)
{
try
{
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8"; string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始文件名称
string fileExtension = Path.GetExtension(fileName);//文件扩展名 byte[] fileData = ReadFileBytes(httpPostedFileBase);//文件流转化为二进制字节 string result = SaveFile(fileExtension, fileData);//文件保存
if (string.IsNullOrEmpty(result))
{
return Json(new { isSuccess = false, path = "",errorMsg= "上传文件失败"});
} return Json(new { isSuccess = true, path = result });
}
catch (Exception ex)
{
return Json(new { isSuccess = false, path = "" });
}
}
else
{
return Json(new { isSuccess = false, path = "" });
}
} /// <summary>
/// 将文件流转化为二进制字节
/// </summary>
/// <param name="fileData">图片文件流</param>
/// <returns></returns>
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
{
byte[] data;
using (Stream inputStream = fileData.InputStream)
{
MemoryStream memoryStream = inputStream as MemoryStream;
if (memoryStream == null)
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}
data = memoryStream.ToArray();
}
return data;
} /// <summary>
/// 保存文件
/// </summary>
/// <param name="fileExtension">文件扩展名</param>
/// <param name="fileData">图片二进制文件信息</param>
/// <returns></returns>
private string SaveFile(string fileExtension, byte[] fileData)
{
string result;
try
{ string saveName = Guid.NewGuid().ToString()+ fileExtension; //保存文件名称 // 文件上传后的保存路径
string basePath = "UploadFile";
string saveDir = DateTime.Now.ToString("yyyy-MM-dd");
string savePath = System.IO.Path.Combine(saveDir, saveName); string serverDir = System.IO.Path.Combine(Server.MapPath("~/"), basePath, saveDir);
if (!System.IO.Directory.Exists(serverDir))
{
System.IO.Directory.CreateDirectory(serverDir);
}
string fileNme = System.IO.Path.Combine(serverDir, saveName);//保存文件完整路径
System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes创建一个新的文件,按照对应的文件流写入,假如已存在则覆盖
//返回完整的图片保存地址
result="/"+basePath + "/" + saveDir + "/" + saveName;
}
catch (Exception)
{
result = "发生错误";
}
return result;
}
}

四、效果图展示:

.Net之Layui多图片上传的更多相关文章

  1. .net mvc + layui做图片上传(二)—— 使用流上传和下载图片

    摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...

  2. .net mvc + layui做图片上传(一)

    图片上传和展示是互联网应用中比较常见的一个功能,最近做的一个门户网站项目就有多个需要上传图片的功能模块.关于这部分内容,本来功能不复杂,但后面做起来却还是出现了一些波折.因为缺乏经验,对几种图片上传的 ...

  3. thinkphp5+layui多图片上传

    准备资料 下载layui <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. php+layui实现图片上传与预览

    端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  5. layui 实现图片上传和预览

    [学习笔记] 图片不自动上传并在表单提交时再上传,看代码. 附上表单页面 前台实现 <#--图片名--><input id="fileName" type=&qu ...

  6. layui实现图片上传

    页面代码: <style> .uploadImgBtn2{ width: 120px; height: 92px; cursor: pointer; position: relative; ...

  7. layui框架图片上传至服务器

    注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...

  8. ThinkPHP5+Layui实现图片上传加预览

    html代码 <div class="layui-upload"> <button type="button" class="lay ...

  9. layui 富文本 图片上传 后端PHP接口

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...

随机推荐

  1. 【msdn wpf forum翻译】TextBox中文本 中对齐 的方法

    原文:[msdn wpf forum翻译]TextBox中文本 中对齐 的方法 原文链接:http://social.msdn.microsoft.com/Forums/en-US/wpf/threa ...

  2. SignalR QuickStart

    原文:SignalR QuickStart SignalR 是一个集成的客户端与服务器库,基于浏览器的客户端和基于 ASP.NET 的服务器组件可以借助它来进行双向多步对话. 换句话说,该对话可不受限 ...

  3. WCF调试日志

    WCF调试,打不了断点or远程调试时,在配置文件的<configuration>结点下面加一段,就可以在对应位置查看服务器调试日志了,远程调试完毕发送亦可! <system.diag ...

  4. 深入浅出RPC——浅出篇 深入篇

    本文转载自这里是原文 近几年的项目中,服务化和微服务化渐渐成为中大型分布式系统架构的主流方式,而 RPC 在其中扮演着关键的作用. 在平时的日常开发中我们都在隐式或显式的使用 RPC,一些刚入行的程序 ...

  5. 使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理

    原文:使用IntelliJ IDEA开发SpringMVC网站(五)博客文章管理 摘要 通过对博客文章的管理,实现外键操作. 目录[-] 八.博客文章管理 1.查看文章 2.添加博客        3 ...

  6. Python Pandas 分析郁达夫《故都的秋》

    最近刚学这块,如果有错误的地方还请大家担待. 本文用到的Python包: Ipython, Numpy, Pandas, Matplotlib 故都的秋原文参考:http://www.xiexingc ...

  7. ArcGIS 10.3 for Server 在windows下的安装教程

    原文:ArcGIS 10.3 for Server 在windows下的安装教程 以下是10.2的教程,10.3同样适用. 许可文件: ArcGIS For Server10.3许可文件 - 下载频道 ...

  8. ef 查询总结

    1.Linq 查询两张表:a表和b表,要得到的数据是a表数据b表没有 例如:a表有5条数据1,2,3,4,5:b表有2条数据1,3:那么就用dataGridView1输出2,4,5:link语句要怎么 ...

  9. CopyFile函數詳解

    CopyFile函數,文件拷贝函数.其基本結構如下: copyfile( lpcstr lpexistingfilename, // 源文件路径 lpcstr lpnewfilename, //新文件 ...

  10. 屏蔽按CapsLock键切换到大写时,编辑框自动弹出的提示(UnregisterClass(TOOLTIPS_CLASS)后,重新设置WndProc并注意返回值)

    WNDPROC OldProc; LPCTSTR lpStr = TEXT("保持大写锁定打开可能会使您错误输入密码"); LRESULT CALLBACK WindowProc( ...