ASP.NET MVC4 利用uploadify.js多文件上传
2017-03-27 11:12
871 查看
页面代码：
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 + "//" + 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>
</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;
//判断是否已经选择上传文件
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");
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
您可能感兴趣的文章:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于uploadify.js实现多文件上传和上传进度条的显示
- struts结合uploadify.js--------------补：单文件，表单数据量少的时候上传
- JAVA利用ajaxfileUpload.js和poi实现excel文件上传存取
- jquery.uploadify.js 上传文件控件
- uploadify.js + servlet 实现文件上传
- 利用jsp+uploadify插件实现删除上传到ftp服务器里面的文件
- 文件上传-jquery.uploadify.js
- 基于uploadify.js实现多文件上传和上传进度条的显示
- 在SSH的基础上使用jquery.uploadify.js上传文件
- 基于uploadify.js实现多文件上传和上传进度条的显示
- NeatUpload js 判断上传文件的大小是否超过了空间的大小
- 利用Jakarta commons fileupload组件实现多文件上传
- jquery uploadify 上传文件在firefox失败的原因
- 利用Ext.ux.UploadDialog异步实现多文件上传
- 在ASP.NET中利用SlickUpload上传大文件（续）
- 在ASP.NET中利用SlickUpload来上传大文件
- Jquery Uploadify插件+Servlet解决FTP多文件上传
- 利用jspsmartupload上传文件，当我不选择文件就直接上传，会有什么结果呢？一个字“惨”啊！
- 利用Jakarta commons fileupload组件实现多文件上传
- 在ASP.NET中利用SlickUpload上传大文件（续）