ASP.NET MVC4 利用uploadify.js多文件上传

最新推荐文章于 2021-08-10 06:46:12 发布

程序猿下山

最新推荐文章于 2021-08-10 06:46:12 发布

阅读量235

点赞数

分类专栏： IIS相关

IIS相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

页面代码：

1.引入js和css文件

100

101

102

103

104

105

106

107

108

109

　<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 + "//" + 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 + "//" + window.location.host + "/UploadImg/Img/"

url = url + fileName;

window.open(url);

}

</script>

2.body内代码

　　<body style="background: url(../../Images/bg.jpg) no-repeat; background-size: 1600px; width: 1600px; height: 700px; ">

<h2 style="text-align:center;">ASP .NET MVC4 多文件文件上传实例</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" >上传第一个</a>

<a class="btn" href="javascript:$('#myfile').uploadify('upload','*');" rel="external nofollow" >上传队列</a>

<a class="btn" href="javascript:$('#myfile').uploadify('cancel');" rel="external nofollow" >取消第一个</a>

<a class="btn" href="javascript:$('#myfile').uploadify('cancel', '*');" rel="external nofollow" >取消队列</a>

</div>

</form>

<div id="upList">

<div id="filelist">

<h3>文件列表</h3>

</div>

<div id="lineDiv"></div>

<div id="imglist">

<h3>图片列表</h3>

</div>

</body>

后台代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

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;

//判断是否已经选择上传文件

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)

{

//设置上传目录

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

{

//设置上传目录

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");

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

程序猿下山

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET MVC4 利用uploadify.js多文件上传

页面代码：1.引入js和css文件? 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 ...
复制链接

扫一扫

专栏目录