激情九月婷婷,亚洲综合色在线观看,四虎在线永久精品高清

前言：
一、引入Layui.cs和Layui.js：
二、前端代碼：
三、服務端接口圖片文件流，并保存：
四、效果圖展示：

前言：

多圖上傳在一些特殊的需求中我們經常會遇到，其實多圖上傳的原理大家都有各自的見解。對于Layui多圖上傳和我之前所說的通過js獲取文本框中的文件數組遍歷提交的原理一樣，只不過是Layui中的upload.render方法已經幫我們封裝好了，我們只管調用即可，也就是說你選中了幾張圖片，那么將會向后臺請求與圖片張數相同的次數，即為遍歷提交的方式。

Layui文件/圖片樣式地址（官方文檔）：https://www.layui.com/demo/upload.html

一、引入Layui.cs和Layui.js：

需要本地項目中存在layui相關樣式和js，非網絡地址

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

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

當然假如你需要有彈框提示的話，你還需要引入Layer.js

二、前端代碼：

a.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>

b.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 + '" id="codetool">



	 

	三、服務端接口圖片文件流，并保存：

	 

	
		
			
				?
			
				
					
						
							
								1
							
								2
							
								3
							
								4
							
								5
							
								6
							
								7
							
								8
							
								9
							
								10
							
								11
							
								12
							
								13
							
								14
							
								15
							
								16
							
								17
							
								18
							
								19
							
								20
							
								21
							
								22
							
								23
							
								24
							
								25
							
								26
							
								27
							
								28
							
								29
							
								30
							
								31
							
								32
							
								33
							
								34
							
								35
							
								36
							
								37
							
								38
							
								39
							
								40
							
								41
							
								42
							
								43
							
								44
							
								45
							
								46
							
								47
							
								48
							
								49
							
								50
							
								51
							
								52
							
								53
							
								54
							
								55
							
								56
							
								57
							
								58
							
								59
							
								60
							
								61
							
								62
							
								63
							
								64
							
								65
							
								66
							
								67
							
								68
							
								69
							
								70
							
								71
							
								72
							
								73
							
								74
							
								75
							
								76
							
								77
							
								78
							
								79
							
								80
							
								81
							
								82
							
								83
							
								84
							
								85
							
								86
							
								87
							
								88
							
								89
							
								90
							
								91
							
								92
							
								93
							
								94
							
								95
							
								96
							
								97
							
								98
							
								99
							
								100
						
						
							
								
									1public class FileUploadController : Controller
								
									 2{
								
									 3/// <summary>
								
									/// 對驗證和處理 HTML 窗體中的輸入數據所需的信息進行封裝，如FromData拼接而成的文件
								
									/// </summary>
								
									/// <param name="context">FemContext對驗證和處理html窗體中輸入的數據進行封裝</param>
								
									/// <returns></returns>
								
									[HttpPost]
								
									public ActionResult FileLoad(FormContext context)
								
									 {
								
									HttpPostedFileBase httpPostedFileBase = Request.Files[0];//獲取二進制圖片文件流
								
									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;
								
									}
								
									}
							
						
					
				
			
		
	
	
		
			
	


	 

	四、效果圖展示：

	 

	

	

	總結

	以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對服務器之家的支持。

	原文鏈接：https://www.cnblogs.com/Can-daydayup/p/11125324.html

			
		    
			
			
			
				 
			
		
		
			
				 
				圖片上傳
				
				Layui
				
				.NET
				
			
			
				
			
		
		
			
				延伸 · 閱讀
			
			
				 2022-02-28Javaweb使用thymeleaf局部刷新結合Layui插件實現Html分
2022-02-27.NET Core開發之配置詳解
2022-02-24詳解linux下的.net/mvc/cms程序結構
2022-02-24C#（.net）中按字節數截取字符串最后出現亂碼問
2022-01-25html5以及jQuery實現本地圖片上傳前的預覽代碼實例
2022-01-22.NET HttpClient簡單使用教程

			
		
		
		
		
			
				
			
		
		
			
				精彩推薦
			
		
		
			
				
					
				
				 ASP.NET教程
				
					微信小程序如何使用原生Websocket與Asp.Net Core SignalR 通信
					
						 背景 如題，這可能算是.net 做小程序的服務端時，繞不開的一個問題，老生常談了。同樣的問題，我記得我2018/19年的一個項目的解決方案是： 修改官方的...
					
					
						未知1802023-06-16
					
				
				
ASP.NET教程
				
					asp .net實現給圖片添加圖片水印方法示例
					
						 圖片上加水印相信每位程序員都會遇到這個需求，下面這篇文章主要給大家介紹了asp .net實現給圖片添加圖片水印的方法，文中給出了完整的實例代碼，相...
					
					
						星火卓越3492020-04-26
					
				
				
ASP.NET教程
				
					.Net MVC實現長輪詢
					
						 這篇文章主要為大家詳細介紹了.Net MVC實現長輪詢的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
...
					
					
						徐小閂2052020-05-07
					
				
				
ASP.NET教程
				
					詳解ASP.NET 生成二維碼實例（采用ThoughtWorks.QRCode和QrCode.Net兩種方
					
						 本篇文章主要介紹了ASP.NET 生成二維碼實例，使用了兩種方法，包括ThoughtWorks.QRCode和QrCode.Net，具有一定的參考價值，有興趣的可以了解一下。
...
					
					
						haitaoDoit7022020-04-12
					
				
				
ASP.NET教程
				
					ASP.NET OutputCache詳解
					
						 這篇文章主要介紹了ASP.NET OutputCache詳解,本文詳細講解了OutputCache的語法、OutputCache的參數、OutputCache使用示例等內容,需要的朋友可以參考下
...
					
					
						junjie2112019-12-16
					
				
				
ASP.NET教程
				
					asp.net中的窗體身份驗證（最簡單篇）
					
						 這篇文章主要介紹了最簡單的asp.net中的窗體身份驗證，詳細敘述了asp.net的窗體身份驗證步驟，感興趣的小伙伴們可以參考一下
...
					
					
						lijiao4812019-12-23
					
				
				
ASP.NET教程
				
					GridView分頁的實現(通用分頁模板)
					
						 要在GridView中加入AllowPaging=true，一頁數據多少行PageSize=10分頁時觸發的事件OnPageIndexChanging等等，感興趣的朋友可以了解下本文，希望對你有所幫助
...
					
					
						asp.net教程網6932019-10-31
					
				
				
ASP.NET教程
				
					asp.net gridview分頁：第一頁 下一頁 1 2 3 4 上一頁 最末頁
					
						 這篇文章主要介紹了asp.net gridview分頁：第一頁 下一頁 1 2 3 4 上一頁 最末頁，可使用上下鍵選中行，選中后點擊修改，textbox獲得gridview中的代碼的數據,需要...
					
					
						mdxy-dxy4182019-12-13
					
				
				

			
		
	
	 
最近更新
【ASP.NET Core】使用SignalR推送服務器日志
Asp.net core Webapi 如何執行定時任務？
ASP.NET Core+Vue3 實現SignalR通訊
.net 溫故知新【13】：Asp.Net Core WebAPI 使用依賴
ASP.NET Core 8 的內存占用可以更低嗎？
編輯推薦
美國和歐洲 vps哪個好？美國和歐洲vps詳細對比
 2云服務器是什么，云主機干什么用的？
2020-07-22
 32020最新好用的web服務器軟件推薦
2020-05-17
4服務器操作系統有哪些?
2020-04-06
5web服務器配置（圖文詳解）
2020-04-06
6企業如何選擇阿里云服務器配置?
2019-10-18
7五大免費主機管理系統優缺點對比及推薦
2019-06-14
82019最新三款Windows下連接Linux的ssh軟件下載推薦
2019-05-28
9服務器常用管理軟件盤點
2019-05-27
10Nginx服務器究竟是怎么執行PHP項目
2019-05-24
閱讀排行
1 ASP.NET Core設置URLs的五種方法
2 ASP.NET登錄注冊頁面實現
3 VS2019離線安裝方法圖文教程
 4 .NET C#創建WebService服務簡單實例
5 NetCore WebSocket即時通訊示例
6 ABP框架的基礎配置及依賴注入講解
7 asp.net core 修改默認端口的幾種方法
8 .net core中的Authorization過濾器使用
9 Visual Studio 2017安裝失敗的解決方法
10 VS2019以及MFC的安裝詳細教程
熱門標簽
 hao123 　  轉化 　  HttpClient 　  讀取數據 　  oledb 　  ACE 　  本地計算機 　  Quartz 　  Swagger 　  Option 　  釋放資源 　  換行 　  DataSet 　  AjaxControlToolKit 　  下拉菜單 　  DropDownList 　  asp.net 　  全角 　  半角 　  .NET 　  彈出框 　  依賴項 　  程序集 　  引用 　  對象 　  網頁跳轉 　  傳值 　  頁面 　  重復提交 　  隨機密碼 　 




 © 2019-2025 服務器之家(www.ythuaji.com.cn) 版權所有關于我們聯系我們版權申明網站地圖






感谢您访问我们的网站，您可能还对以下资源感兴趣：
一区二区三区在线|一区二区三区亚洲视频|一区二区三区亚洲|一区二区三区午夜|一区二区三区四区在线视频|一区二区三区四区在线免费观看









主站蜘蛛池模板：
99久久免费国产特黄
|
yellow视频在线观看免费
|
久草热在线
|
亚洲天堂一区二区在线观看
|
91香蕉在线|
欧美国产日本精品一区二区三区
|
天天色综
|
亚州综合网
|
91最新国产
|
四虎成人影院网址
|
国产欧美日韩综合
|
奇米影视久久777中文字幕
|
色多多多|
免费高清资源黄网站在线观看
|
亚洲成人77777
|
亚洲国产精品综合一区在线
|
天天操天天舔
|
日本www午夜色在线视频
|
国产午夜亚洲精品一区网站
|
女子张腿让男人桶免费
|
日本在线亚州精品视频在线
|
好爽好紧小雪别夹小说
|
91啦在线视频
|
免费观看一区二区
|
免费视频片在线观看
|
日本春菜花在线中文字幕
|
美女的隐私无遮挡撒尿
|
精品国产成人AV在线看
|
免费国产高清精品一区在线
|
男人视频网站
|
奇米影视奇米色777欧美
|
免费高清视频在线观看
|
久久精品中文字幕
|
日本高清在线看免费观看
|
大肥婆丰满大肥奶bbw肥
|
亚洲精品国产国语
|
国产亚洲精aa在线观看香蕉
|
精品一久久香蕉国产线看观
|
成年人在线视频免费观看
|
a色在线|
禁忌高h
|

<rt id="seyqg"><pre id="seyqg"></pre></rt>