欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

歡迎來到入門教程網(wǎng)!

ASP.NET

當(dāng)前位置:主頁 > 網(wǎng)絡(luò)編程 > ASP.NET >

.Net學(xué)習(xí)筆記之Layui多圖片上傳功能

來源:本站原創(chuàng)|時間:2020-01-11|欄目:ASP.NET|點擊: 次

前言:

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

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

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

需要本地項目中存在layui相關(guān)樣式和js,非網(wǎng)絡(luò)地址

 <link rel="stylesheet" rel="external nofollow"   media="all">

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

當(dāng)然假如你需要有彈框提示的話,你還需要引入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;">
預(yù)覽圖:
<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) {
//預(yù)讀本地文件示例,不支持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>

三、服務(wù)端接口圖片文件流,并保存:

1public class FileUploadController : Controller
 2{
 3/// <summary>
/// 對驗證和處理 HTML 窗體中的輸入數(shù)據(jù)所需的信息進(jìn)行封裝,如FromData拼接而成的文件
/// </summary>
/// <param name="context">FemContext對驗證和處理html窗體中輸入的數(shù)據(jù)進(jìn)行封裝</param>
/// <returns></returns>
[HttpPost]
public ActionResult FileLoad(FormContext context)
 {
HttpPostedFileBase httpPostedFileBase = Request.Files[0];//獲取二進(jìn)制圖片文件流
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);//文件擴(kuò)展名

byte[] fileData = ReadFileBytes(httpPostedFileBase);//文件流轉(zhuǎn)化為二進(jìn)制字節(jié)

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>
/// 將文件流轉(zhuǎn)化為二進(jìn)制字節(jié)
/// </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">文件擴(kuò)展名</param>
/// <param name="fileData">圖片二進(jìn)制文件信息</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創(chuàng)建一個新的文件,按照對應(yīng)的文件流寫入,假如已存在則覆蓋
//返回完整的圖片保存地址
result="/"+basePath + "/" + saveDir + "/" + saveName;
}
catch (Exception)
{
result = "發(fā)生錯誤";
}
return result;
}
}

四、效果圖展示:


總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,謝謝大家對我們的支持。

上一篇:vs2015中mysql.h文件打不開的解決辦法

欄    目:ASP.NET

下一篇:ASP.NET Core 實現(xiàn)自定義WebApi模型驗證實例講解

本文標(biāo)題:.Net學(xué)習(xí)筆記之Layui多圖片上傳功能

本文地址:http://mengdiqiu.com.cn/a1/ASP_NET/10896.html

網(wǎng)頁制作CMS教程網(wǎng)絡(luò)編程軟件編程腳本語言數(shù)據(jù)庫服務(wù)器

如果侵犯了您的權(quán)利,請與我們聯(lián)系,我們將在24小時內(nèi)進(jìn)行處理、任何非本站因素導(dǎo)致的法律后果,本站均不負(fù)任何責(zé)任。

聯(lián)系QQ:835971066 | 郵箱:835971066#qq.com(#換成@)

Copyright © 2002-2020 腳本教程網(wǎng) 版權(quán)所有