ASP.NET MVC4 利用uploadify.js多文件上传
程序员文章站
2023-11-29 21:04:04
页面代码:
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"); } }
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!