ASP. NET MVC4 uses uploadify. js to upload multiple files, mvc4uploadify. js
Page code:
1. Introduce js and css files
<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/loadFileInf O ", datatype: 'html', success: function (result) {$ ('# filelist '). append (result) ;}}); $. ajax ({url: "/home/loadImgInfo", datatype: 'html ', success: function (result) {$ (' # imglist '). append (result) ;}}) ;}); // open the file function openFile (doc) Online {try {var fileName =$ (doc ). text (); var url = window. location. protocol + "//" + window. location. host + "/UploadFile/File/" url = url + fileName; window. open (Url);} catch (EventException) {alert ("this file cannot be opened! ") ;}} // Open the image function openImg (doc) {var fileName =$ (doc) online ). text (); var url = window. location. protocol + "//" + window. location. host + "/UploadImg/Img/" url = url + fileName; window. open (url) ;}</script>
2. Code in the body
<Body style = "background: url (.. /.. /Images/bg.jpg) no-repeat; background-size: 1600px; width: 1600px; height: 700px; ">
Background code:
Public ActionResult loadFileInfo () {StringBuilder sb = new StringBuilder (); DirectoryInfo theFolder = new DirectoryInfo (Server. MapPath ("~ /UploadFile/"); DirectoryInfo [] dirInfo = theFolder. getDirectories (); // traverse the folder foreach (DirectoryInfo NextFolder in dirInfo) {FileInfo [] fileInfo = NextFolder. getFiles (); // traverse the file 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 = 'open File (this) '> "+ str +" </p> ");} else if (exStr = ". doc "| exStr = ". docx ") {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else if (exStr = ". ppt "| exStr = ". pptx ") {sb. append ("<p onclick = 'openfile (this) '> "+ Str +" </p> ");} else if (exStr = ". xlsx "| exStr = ". xls "| exStr = ". XLS ") {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else if (exStr = ". pdf ") {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else if (exStr = ". js "| exStr = ". JS ") {sb. Append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else if (exStr = ". html "| exStr = ". HTML ") {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else if (exStr = ". txt "| exStr = ". TXT ") {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else if (exStr = ". mp3 "| exStr = ". wmv "| exStr = ". aac ") {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else if (exStr = ". avi "| exStr = ". mov "| exStr = ". mp4 "| exStr = ". ram "| exStr = ". flv ") {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ");} else {sb. append ("<p onclick = 'openfile (this) '> "+ str +" </p> ") ;}} return Content (sb. toString ();} public ActionResult loadImgInfo () {StringBuilder sb = new StringBuilder (); DirectoryInfo theFolder = new DirectoryInfo (Server. mapPath ("~ /UploadImg/"); DirectoryInfo [] dirInfo = theFolder. getDirectories (); // traverse the folder foreach (DirectoryInfo NextFolder in dirInfo) {FileInfo [] fileInfo = NextFolder. getFiles (); // traverse the file foreach (FileInfo NextFile in fileInfo) {string str = NextFile. name; sb. append ("<p onclick = 'openimg (this) '> "+ str +" </p> ") ;}} return Content (sb. toString ();} pu Blic ActionResult UploadFile () {string filepath = ""; bool fileOK = false; // determine whether the file has been uploaded HttpPostedFileBase file = Request. files ["myfile"]; if (file! = Null & file. contentLength> 0) {String fileExtension = System. IO. path. getExtension (file. fileName ). toLower (); // determines whether the image type is String [] allowedExtensions = {". gif ",". png ",". bmp ",". jpg "}; for (int I = 0; I <allowedExtensions. length; I ++) {if (fileExtension = allowedExtensions [I]) {fileOK = true ;}} if (fileOK) {// set the upload directory string path = Server. mapPath ("~ /UploadImg/Img/"); if (! Directory. exists (path) Directory. createDirectory (path); string filenNamer = file. fileName; // file path filepath = path + filenNamer; file. saveAs (filepath); return RedirectToAction ("Upload", "Home");} else {// set the Upload directory string path = Server. mapPath ("~ /UploadFile/File/"); if (! Directory. exists (path) Directory. createDirectory (path); // save files not of the image type to the File directory string filenNamer = file. fileName; // file path filepath = path + filenNamer; file. saveAs (filepath); return RedirectToAction ("Upload", "Home") ;}} else {var script = String. format ("<script> alert ('select a file and upload it again! '); Location. href = '{0}' </script> ", Url. action ("Upload"); return Content (script, "text/html ");}}The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
