javascript实现多附件上传功能

发布时间:2020-01-21编辑:脚本学堂
本文介绍了javascript多附件上传功能的实现代码,后台数据由c#处理,感兴趣的朋友参考下。

1,页面文件(js多附件上传前台代码)
 

复制代码 代码示例:
<%@ Page AutoEventWireup="true" CodeFile="add_news.aspx.cs" Debug="true" Inherits="admin_news_xml"
    Language="C#" ValidateRequest="false" %>
<%@ Register Assembly="FreeTextBox" Namespace="FreeTextBoxControls" TagPrefix="FTB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>添加新闻--www.jb200.com</title>
<script type="text/javascript" src="../js/calendar.js"></script>
<link rel="stylesheet" rev="stylesheet" type="text/css" media="screen, projection" href="../css/manage.css" />
<script type="text/javascript">
var myCalendar=new PopupCalendar("myCalendar");  //初始化控件时,请给出实例名称:myCalendar
myCalendar.Width="150px";
myCalendar.Init();    
function addFile() //继续添加附件
{
    var str = '<br/><input type="file" size="60" name="File" onchange="Check_FileType(this.value)"/>';
    document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str);
}
function Check_FileType(str) //检查文件类型
{
 var pos = str.lastIndexOf(".");
 var lastname = str.substring(pos,str.length);
 if (lastname.toLowerCase()!=".xls"&&lastname.toLowerCase()!=".rar"&&lastname.toLowerCase()!=".zip"&&lastname.toLowerCase()!=".doc"&&lastname.toLowerCase()!=".txt"&&lastname.toLowerCase()!=".wps"&&lastname.toLowerCase()!=".pdf"&&lastname.toLowerCase()!=".docx")
 {
     alert("文件必须为.rar,.zip,.txt,.doc..docx,.wps,.txt,.pdf类型");
     return false;
 }
 else
 {
  return true;
 }
}
</script>
 <style type="text/css">
#main_content p {
    clear: left;
    padding:2px 0px 5px 5px;
    margin: 0px;
    width: 650px;
    height:16px;
}
#main_content label {
    font-weight: bold;float:left;width: 70px;
   
}
#Button1 {
 width: 108px;
}
</style>
</head>
<body style="font-size:12px;">
    <form id="form1"  method="post" runat="server" enctype="multipart/form-data">
    <div id="main_content">
 <p id="title" style="width:650px">添加新闻</p>
 <p><label>标题</label><asp:TextBox ID="txt_title" runat="server" Style=" left: 100px;top: 20px"></asp:TextBox></p>
 <p><label>发布时间</label><asp:TextBox ID="txt_time" runat="server" Style="left: 100px; top: 68px"></asp:TextBox><img
  onclick="getDateString(this,myCalendar,txt_time)" src="../media/calendar.gif" />
     <asp:Label ID="Label2" runat="server" ForeColor="Red" Text="点击选择日期" Width="106px"></asp:Label></p>
 <p><label>发布人</label><asp:TextBox ID="txt_author" runat="server" Style=" left: 100px;top: 102px"></asp:TextBox></p>
 <p><label>新闻类别</label>
     <asp:DropDownList ID="list_department" runat="server" Style="position: relative" Width="155px" DataSourceID="SqlDataSource1" DataTextField="name" DataValueField="id">
     </asp:DropDownList>
     <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ahpcConnectionString %>"
  SelectCommand="SELECT [id], [name] FROM [category] WHERE [name]<>'图片新闻'"></asp:SqlDataSource>
 </p>
 <p ><label>内容</label><span style="font-size:12px;color:Green;">若从Word粘贴,请在复制完后点<img src="../media/ftb/office2003/wordclean.gif" align="absmiddle"/>图标清除格式!</span> </p>
  <FTB:FreeTextBox ID="FreeTextBox1" runat="server" AllowHtmlMode="True" AutoConfigure="Default"
      ButtonDownStyle="False" ButtonOverStyle="False" ButtonPath="../media/ftb/office2003/"
      ButtonType="Image" ConvertHtmlSymbolsToHtmlCodes="True" Height="500px" ImageGalleryPath="news/images"
      ToolbarLayout="FontFacesMenu,FontSizesMenu,JustifyLeft,JustifyRight,JustifyCenter,JustifyFull,InsertRule,InsertDate,InsertTime,
WordCount,InsertFieldSet,WordClean,WordPaste,InsertImageFromGallery,InsertTable,Cut,Copy,Find,Paste,Delete;Undo,Redo,
RemoveFormat|FontBackColorsMenu,SymbolsMenu,FontForeColorsMenu,BulletedList,NumberedList,Indent,Outdent,Bold,Italic,Underline,
Strikethrough,Superscript,Subscript,CreateLink,Unlink"
      Width="650px">
     </FTB:FreeTextBox>
//附件上传
 <label style="height: 20px; line-height: 20px;">上传附件:</label>
  <input id="Button1" type="button" value=" 添加更多附件"  onclick="addFile()"/>
 <input id="Submit1" type="submit" value="提交" onclick="this.form1.submit()" />
     <asp:Label ID="Label1" runat="server" BorderColor="White" ForeColor="Red" Height="20px"
  Width="333px">上传文件大小不得超过10M</asp:Label>&nbsp;
     <p id="MyFile"><input type="file"  size="60" name="File" onchange="Check_FileType(this.value)"/></p>
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
 
 <p style="text-align:center; height: 14px;"></p>
 <asp:HyperLink ID="HyperLink1" runat="server" Visible="False" Font-Size="14px" Target="_blank">[HyperLink1]</asp:HyperLink><br />
    </div>
    </form>
</body>
</html>

2,后台处理代码
 

复制代码 代码示例:

//文件上传处理
 HttpFileCollection files = HttpContext.Current.Request.Files;
 /// '状态信息
 System.Text.StringBuilder strMsg = new System.Text.StringBuilder();

 for (int iFile = 0; iFile < files.Count; iFile++)
 {
     ///'检查文件扩展名字
     bool fileOK = false;
     HttpPostedFile postedFile = files[iFile];
     string fileName, fileExtension;
     fileName = System.IO.Path.GetFileName(postedFile.FileName);
     if (fileName != "")
     {
  fileExtension = System.IO.Path.GetExtension(fileName);
  String[] allowedExtensions =
  { ".doc", ".xls", ".rar", ".zip", ".wps", ".txt", "docx", "pdf", "xls" };
  for (int i = 0; i < allowedExtensions.Length; i++)
  {
      if (fileExtension == allowedExtensions[i])
      {
   fileOK = true;
   break;
      }

  }
  if (!fileOK) Label1.Text = "不支持上传此类型文件" + fileName;
}

if (fileOK)
{
    postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("~/news/" + folder + "/attachment/") + fileName);
    if (attachment_filename == "") attachment_filename = fileName;
       else attachment_filename = attachment_filename + "|" + fileName;
     }
 }