欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

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