標籤：style blog class code java tar
前段時間做了幾個關於圖片、檔案上傳的Demo，使用用戶端Query-File-Upload外掛程式和服務端Badkload組件實現多檔案非同步上傳，比如"MVC檔案上傳04-使用用戶端jQuery-File-Upload外掛程式和服務端Backload組件實現多檔案非同步上傳",就Demo而言，效果還算不錯，但到了實際項目，發現使用Query-File-Upload外掛程式和服務端Badkload組件與項目比較難融合，有"重"的感覺。相比而言，JSAjaxFileUploader這款外掛程式比較"輕量級"，它可以幫我們實現單個檔案或多個檔案的非同步上傳和管理，並且有不錯的用戶端效果，它的Demo在這裡。
本篇源碼在github，先看效果：
● 上傳檔案顯示進度條：
● 停止上傳按鈕和關閉縮圖按鈕：
● 限制上傳檔案的類型：
● 限制上傳檔案的尺寸：
●上傳成功後顯示縮圖、檔案名稱以及回傳資訊：
● 點擊介面上的刪除按鈕，介面刪除，同步刪除檔案夾中檔案。
● 重新上傳檔案，介面刪除，同步刪除檔案夾中檔案，並介面顯示新的縮圖、檔案名稱等。
□ HomeController
由於需要把儲存到檔案夾檔案的路徑、檔案名稱等回傳給介面，所以需要一個類，專門負責回傳給用戶端所需要的資訊。
public class UploadFileResult
{
public string FileName { get; set; }
public int Length { get; set; }
public string Type { get; set; }
public bool IsValid { get; set; }
public string Message { get; set; }
public string FilePath { get; set; }
}
把上傳的檔案名稱改成以時間命名的格式，並儲存到檔案夾，再把回傳資訊以json形式傳遞給視圖。關於刪除，需要接收來自視圖的檔案名稱參數。
#region 上傳單個檔案
//顯示
public ActionResult Index()
{
return View();
}
//接收上傳
[HttpPost]
public ActionResult UploadFile()
{
List<UploadFileResult> results = new List<UploadFileResult>();
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0 || hpf == null)
{
continue;
}
var fileName = DateTime.Now.ToString("yyyyMMddhhmmss") +
hpf.FileName.Substring(hpf.FileName.LastIndexOf(‘.‘));
string pathForSaving = Server.MapPath("~/AjaxUpload");
if (this.CreateFolderIfNeeded(pathForSaving))
{
hpf.SaveAs(Path.Combine(pathForSaving, fileName));
results.Add(new UploadFileResult()
{
FilePath = Url.Content(String.Format("~/AjaxUpload/{0}", fileName)),
FileName = fileName,
IsValid = true,
Length = hpf.ContentLength,
Message = "上傳成功",
Type = hpf.ContentType
});
}
}
return Json(new
{
name = results[0].FileName,
type = results[0].Type,
size = string.Format("{0} bytes", results[0].Length),
path = results[0].FilePath,
msg = results[0].Message
});
}
#region 共用方法
/// <summary>
/// 檢查是否要建立上傳檔案夾，如果沒有就建立
/// </summary>
/// <param name="path">路徑</param>
/// <returns></returns>
private bool CreateFolderIfNeeded(string path)
{
bool result = true;
if (!Directory.Exists(path))
{
try
{
Directory.CreateDirectory(path);
}
catch (Exception)
{
//TODO：處理異常
result = false;
}
}
return result;
}
//根據檔案名稱刪除檔案
[HttpPost]
public ActionResult DeleteFileByName(string name)
{
string pathForSaving = Server.MapPath("~/AjaxUpload");
System.IO.File.Delete(Path.Combine(pathForSaving, name));
return Json(new
{
msg = true
});
}
#endregion
□ Home/Index.cshml
前台視圖主要做如下幾件事：
● 每次上傳之前檢查表格中是否有資料，如果有，實施介面刪除並同步刪除檔案夾中的檔案
● 上傳成功動態建立表格行顯示縮圖、檔案名稱和刪除按鈕
● 點擊刪除按鈕實施介面刪除並同步刪除檔案夾中的檔案
由於表格行是動態產生的，需要對刪除按鈕以"冒泡"的方式註冊事件： $(‘#tb‘).on("click", ".delImg", function ()
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/JSAjaxFileUploader/JQuery.JSAjaxFileUploader.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/JSAjaxFileUploader/JQuery.JSAjaxFileUploaderSingle.js"></script>
<style type="text/css">
#tb table{
border-collapse: collapse;
width: 600px;
}
#tb td {
text-align: center;
padding-top: 5px;
width: 25%;
}
#tb tr {
background-color: #E3E3E3;
line-height: 35px;
}
.showImg {
width: 50px;
height: 50px;
}
</style>
<script type="text/javascript">
$(function () {
//隱藏顯示圖片的表格
$(‘#tbl‘).hide();
$(‘#testId‘).JSAjaxFileUploader({
uploadUrl: ‘@Url.Action("UploadFile","Home")‘,
inputText: ‘選擇上傳檔案‘,
//fileName: ‘photo‘,
maxFileSize: 512, //Max 500 KB file 1kb=1024位元組
allowExt: ‘gif|jpg|jpeg|png‘,
zoomPreview: false,
zoomWidth: 360,
zoomHeight: 360,
beforesend: function (file) {
if ($(‘.imgName‘).text() != "") {
deleteImg();
$(‘#tbl‘).hide();
}
},
success: function (data) {
$(‘.file_name‘).html(data.name);
$(‘.file_type‘).html(data.type);
$(‘.file_size‘).html(data.size);
$(‘.file_path‘).html(data.path);
$(‘.file_msg‘).html(data.msg);
createTableTr();
$(‘#tbl‘).show();
$(‘.showImg‘).attr("src", data.path);
$(‘.imgName‘).text(data.name);
},
error: function (data) {
alert(data.msg);
}
});
//點擊刪除連結刪除剛上傳圖片
$(‘#tbl‘).on("click", ".delImg", function () {
deleteImg();
//window.location.reload();
});
});
//刪除圖片方法：點擊刪除連結或上傳新圖片刪除原先圖片用到
function deleteImg() {
$.ajax({
cache: false,
url: ‘@Url.Action("DeleteFileByName", "Home")‘,
type: "POST",
data: { name: $(‘.imgName‘).text() },
success: function (data) {
if (data.msg) {
//alert("圖片刪除成功");
$(‘.delImg‘).parent().parent().remove();
}
},
error: function (jqXhr, textStatus, errorThrown) {
alert("出錯了 ‘" + jqXhr.status + "‘ (狀態: ‘" + textStatus + "‘, 錯誤為: ‘" + errorThrown + "‘)");
}
});
}
//建立表格
function createTableTr() {
var table = $(‘#tbl‘);
table.append("<tr><td><img class=‘showImg‘/></td><td colspan=‘2‘><span class=‘imgName‘></span></td><td><a class=‘delImg‘ href=‘javascript:void(0)‘>刪除</a></td></tr>");
}
</script>
</head>
<body>
<div id="testId"></div>
<div id="tb">
<table id="tbl">
<tbody>
</tbody>
</table>
</div>
<div class="file_name"></div>
<br />
<div class="file_type"></div>
<br />
<div class="file_size"></div>
<br />
<div class="file_path"></div>
<br />
<div class="file_msg"></div>
</body>
</html>
另外：
需要刪除源js檔案中input元素的multiple屬性，使之只能接收單個檔案。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
