ASP.NET MVC4 利用uploadify.js多文件上傳
更新時(shí)間：2017年03月27日 11:12:47 作者：Resources
本文主要介紹了ASP.NET MVC4利用uploadify.js實(shí)現(xiàn)多文件上傳的方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
頁面代碼：
1.引入js和css文件
<link href="~/Scripts/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" />
<style type="text/css">
#upDiv {
width: 550px;
height: 400px;
border: 2px solid red;
margin-top: 30px;
margin-left: 50px;
float: left;
}
div form {
text-align: center;
vertical-align: middle;
}
h2, h3 {
text-align: center;
color: #00B2EE;
}
#upList {
width: 900px;
height: 400px;
float: left;
margin-top: 30px;
margin-left: 50px;
overflow-y: scroll;
border: 2px solid red;
}
#filelist {
width: 45%;
height: 400px;
float: left;
}
#lineDiv {
width: 50px;
height: 400px;
float: left;
}
#imglist {
width: 45%;
height: 400px;
float: left;
}
#form1 {
margin-top: 25px;
}
img {
width: 25px;
height: 25px;
}
.btn {
width: 150px;
height: 40px;
text-align: center;
background-color: #b58061;
color: white;
}
p {
cursor: pointer;
}
</style>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/uploadify/jquery.uploadify-3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#myfile").uploadify({
"auto": false,
"swf": "../Scripts/uploadify/uploadify.swf",
"uploader": "../Home/UploadFiles",
"removeCompleted": false,
"onUploadSuccess": function (file, data, response) {
},
"onQueueComplete": function () {
window.location.reload();
}
});
$.ajax({
url: "/home/loadFileInfo",
datatype: 'html',
success: function (result) {
$('#filelist').append(result);
}
});
$.ajax({
url: "/home/loadImgInfo",
datatype: 'html',
success: function (result) {
$('#imglist').append(result);
}
});
});
//在線打開文件
function openFile(doc) {
try {
var fileName = $(doc).text();
var url = window.location.protocol + "http://" + window.location.host + "/UploadFile/File/"
url = url + fileName;
window.open(url);
} catch (EventException) {
alert("此文件無法打開！");
}
}
//在線打開圖片
function openImg(doc) {
var fileName = $(doc).text();
var url = window.location.protocol + "http://" + window.location.host + "/UploadImg/Img/"
url = url + fileName;
window.open(url);
}
</script>
2.body內(nèi)代碼
<body style="background: url(../../Images/bg.jpg) no-repeat; background-size: 1600px; width: 1600px; height: 700px; ">
<h2 style="text-align:center;">ASP .NET MVC4 多文件文件上傳實(shí)例</h2>
<form id="form1">
<div>
<input type="file" id="myfile" name="myfile" />
</div>
<div>
<a class="btn" href="javascript:$('#myfile').uploadify('upload');" rel="external nofollow" >上傳第一個(gè)</a>
<a class="btn" href="javascript:$('#myfile').uploadify('upload','*');" rel="external nofollow" >上傳隊(duì)列</a>
<a class="btn" href="javascript:$('#myfile').uploadify('cancel');" rel="external nofollow" >取消第一個(gè)</a>
<a class="btn" href="javascript:$('#myfile').uploadify('cancel', '*');" rel="external nofollow" >取消隊(duì)列</a>
</div>
</form>
<div id="upList">
<div id="filelist">
<h3>文件列表</h3>
</div>
<div id="lineDiv"></div>
<div id="imglist">
<h3>圖片列表</h3>
</div>
</div>
</body>
后臺代碼：
public ActionResult loadFileInfo()
{
StringBuilder sb = new StringBuilder();
DirectoryInfo theFolder = new DirectoryInfo(Server.MapPath("~/UploadFile/"));
DirectoryInfo[] dirInfo = theFolder.GetDirectories();
//遍歷文件夾
foreach (DirectoryInfo NextFolder in dirInfo)
{
FileInfo[] fileInfo = NextFolder.GetFiles();
//遍歷文件
foreach (FileInfo NextFile in fileInfo)
{
string exStr = NextFile.Extension;
string str = NextFile.Name;
if (exStr == ".zip" || exStr == ".7z" || exStr == ".rar" || exStr.ToLower() == ".rars")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/zip.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".doc" || exStr == ".docx")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/words.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".ppt" || exStr == ".pptx")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/ppt.jpg' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".xlsx" || exStr == ".xls" || exStr == ".XLS")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/excel.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".pdf")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/pdf.jpg' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".js" || exStr == ".JS")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/js.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".html" || exStr == ".HTML")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/html.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".txt" || exStr == ".TXT")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/txt.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".mp3" || exStr == ".wmv" || exStr == ".aac")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/mp3.png' width='25' height='25' />" + str + "</p>");
}
else if (exStr == ".avi" || exStr == ".mov" || exStr == ".mp4" || exStr == ".ram" || exStr == ".flv")
{
sb.Append("<p onclick='openFile(this)'><img src='../../Images/video.png' width='25' height='25' />" + str + "</p>");
}
else {
sb.Append("<p onclick='openFile(this)'><img src='../../Images/file.jpg' width='25' height='25' />" + str + "</p>");
}
}
}
return Content(sb.ToString());
}
public ActionResult loadImgInfo()
{
StringBuilder sb = new StringBuilder();
DirectoryInfo theFolder = new DirectoryInfo(Server.MapPath("~/UploadImg/"));
DirectoryInfo[] dirInfo = theFolder.GetDirectories();
//遍歷文件夾
foreach (DirectoryInfo NextFolder in dirInfo)
{
FileInfo[] fileInfo = NextFolder.GetFiles();
//遍歷文件
foreach (FileInfo NextFile in fileInfo)
{
string str = NextFile.Name;
sb.Append("<p onclick='openImg(this)'><img src='../../Images/img.png' width='25' height='25' />" + str + "</p>");
}
}
return Content(sb.ToString());
}
public ActionResult UploadFile()
{
string filepath = "";
bool fileOK = false;
//判斷是否已經(jīng)選擇上傳文件
HttpPostedFileBase file = Request.Files["myfile"];
if (file != null && file.ContentLength > 0)
{
String fileExtension = System.IO.Path.GetExtension(file.FileName).ToLower();
//判斷是否為圖片類型
String[] allowedExtensions = { ".gif", ".png", ".bmp", ".jpg" };
for (int i = 0; i < allowedExtensions.Length; i++)
{
if (fileExtension == allowedExtensions[i])
{
fileOK = true;
}
}
if (fileOK)
{
//設(shè)置上傳目錄
string path = Server.MapPath("~/UploadImg/Img/");
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
string filenNamer = file.FileName;
//文件路徑
filepath = path + filenNamer;
file.SaveAs(filepath);
return RedirectToAction("Upload", "Home");
}
else
{
//設(shè)置上傳目錄
string path = Server.MapPath("~/UploadFile/File/");
if (!Directory.Exists(path))
Directory.CreateDirectory(path);
//不為圖片類型的文件存入到File目錄中
string filenNamer = file.FileName;
//文件路徑
filepath = path + filenNamer;
file.SaveAs(filepath);
return RedirectToAction("Upload", "Home");
}
}
else
{
var script = String.Format("<script>alert('請選擇文件后再上傳！');location.href='{0}'</script>", Url.Action("Upload"));
return Content(script, "text/html");
}
}
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
asp.net 2個(gè)日期之間的整月數(shù)的算法
我是說兩個(gè)日期之間間隔整月，比如2008-11-5 和 2009-4-3之間的整月，結(jié)果是12，1，2，3這四個(gè)月2009-06-06
asp.net 光棒效應(yīng)實(shí)現(xiàn)代碼
asp.net 光棒效應(yīng)（今天剛剛學(xué)到的）2009-12-12
如果你想把自己機(jī)器的圖片或者文件放到服務(wù)器上該怎么辦呢？<BR>可選有三種辦法ftp上傳、用u盤拷貝到服務(wù)器上、如果服務(wù)器支持asp上傳功能，用網(wǎng)頁瀏覽器將文件上傳到服務(wù)器上2015-09-09
asp.net頁面觸發(fā)事件panel滾動條高度不變的實(shí)現(xiàn)方法
asp.net頁面按鈕點(diǎn)擊觸發(fā)事件后panel滾動條非自動回到頂端，每次都要往下拉一下，關(guān)于這個(gè)問題的解決方法如下2014-11-11
屬性的定義和使用 屬性由兩個(gè)部分組成：屬性頭和存儲器。存儲器分為get訪問器和set訪問器。聲明屬性的一般形式為： 修飾符 類型 屬性名2008-05-05
在.NET中,內(nèi)存管理主要依賴?yán)厥眨℅C）,但對于非托管資源如文件句柄、數(shù)據(jù)庫連接等,需要更細(xì)粒度的控制,介紹了使用using語句和顯式調(diào)用Dispose方法兩種方式來管理這些資源,避免內(nèi)存泄漏,感興趣的朋友跟隨小編一起看看吧2024-10-10
值類型通常被分配在棧上，它的變量直接包含變量的實(shí)例，使用效率比較高;引用類型分配在托管堆上，引用類型的變量通常包含一個(gè)指向?qū)嵗闹羔?，變量通過該指針來引用實(shí)例,需要的朋友可以了解下2012-12-12
Asp.Net 動態(tài)頁面轉(zhuǎn)靜態(tài)頁面主要代碼
關(guān)于在Asp.Net中動態(tài)頁面轉(zhuǎn)靜態(tài)頁面的方法網(wǎng)上比較多。結(jié)合實(shí)際的需求，我在網(wǎng)上找了一些源代碼，并作修改?，F(xiàn)在把修改后的代碼以及說明寫一下。2009-12-12
asp.net圖片上傳生成縮略圖的注意事項(xiàng)...2007-09-09
.NET Core 基于Websocket的在線聊天室實(shí)現(xiàn)
這篇文章主要介紹了.NET Core 基于Websocket的在線聊天室實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03