当前位置: 移动技术网 > IT编程>开发语言>.net > ASP.NET MVC4 利用uploadify.js多文件上传

ASP.NET MVC4 利用uploadify.js多文件上传

2017年12月08日  | 移动技术网IT编程  | 我要评论

赌气婚姻,日本小游戏,8888色大全夜夜骑

页面代码:

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

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网