ASP.NET MVC4 利用uploadify.js多文件上傳
更新時(shí)間：2017年03月27日 11:12:47 作者：Resources
本文主要介紹了ASP.NET MVC4利用uploadify.js實(shí)現(xiàn)多文件上傳的方法代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
頁(yè)面代碼：
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);
}
});
});
//在線打開(kāi)文件
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("此文件無(wú)法打開(kāi)！");
}
}
//在線打開(kāi)圖片
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>
后臺(tái)代碼：
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('請(qǐng)選擇文件后再上傳！');location.href='{0}'</script>", Url.Action("Upload"));
return Content(script, "text/html");
}
}
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
用vs調(diào)試sql存儲(chǔ)過(guò)程圖文介紹
想必大家應(yīng)該有給存儲(chǔ)過(guò)程找錯(cuò)誤的經(jīng)歷吧，一遍遍的去讀sql代碼，一句一句的測(cè)試,發(fā)現(xiàn)一個(gè)小錯(cuò)誤可能都要用很長(zhǎng)的時(shí)間,接下來(lái)將介紹使用vs2010調(diào)試存儲(chǔ)過(guò)程,感興趣的朋友可以不要錯(cuò)過(guò)了啊2013-02-02
在ASP.Net中實(shí)現(xiàn)flv視頻轉(zhuǎn)換的代碼
在ASP.Net中實(shí)現(xiàn)flv視頻轉(zhuǎn)換的代碼...2007-09-09
DoDragDrop方法，用于開(kāi)始對(duì)象的拖放操作,需要的朋友可以參考下。2011-12-12
這篇文章主要為大家詳細(xì)介紹了ASP.NET實(shí)現(xiàn)大文件上傳功能，解決了 ASP.NET 中的大文件上傳問(wèn)題，感興趣的朋友可以參考一下2016-07-07
AspNetPager分頁(yè)控件定義及應(yīng)用樣式示例介紹
AspNetPager分頁(yè)控件想必大家并不陌生吧，在本文將為大家詳細(xì)介紹下此控件的css樣式定義，感興趣的朋友可以參考下2013-10-10
如何在ASP.NET Core類庫(kù)項(xiàng)目中讀取配置文件詳解
這篇文章主要給大家介紹了關(guān)于如何在ASP.NET Core類庫(kù)項(xiàng)目中讀取配置文件的相關(guān)資料，這是朋友提的一個(gè)問(wèn)題，文中通過(guò)示例代碼介紹的非常詳解，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧。2017-10-10
js 父頁(yè)單選按鈕取值函數(shù)2008-12-12
這篇文章主要為大家詳細(xì)介紹了RabbitMQ .NET消息隊(duì)列使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
ASP.NET控件10個(gè)最有用的屬性詳解,學(xué)習(xí).net的朋友可以參考下。2011-09-09
asp.net中通過(guò)ALinq讓Mysql操作變得如此簡(jiǎn)單
當(dāng)大家已經(jīng)習(xí)慣了使用.net 去操作SQL Server，有多少人曾經(jīng)嘗試過(guò)使用.net 去操作Mysql數(shù)據(jù)庫(kù)！在.net 的光環(huán)下，Mysql是顯得如此微不足道！但是Mysql的開(kāi)源又是如此具有誘惑。2011-07-07