ASP.NET MVC4 利用uploadify.js多文件上传
程序员文章站
2023-08-15 12:37:27
页面代码：
1.引入js和css文件
页面代码：
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");
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
上一篇： CSS3悬停效果案例应用
下一篇： photoshop 硬币的金属感