多文件上传 js实现

12 篇文章 0 订阅
2 篇文章 0 订阅

多文件上传 js实现

可以动态添加输入表单,上传的文件数量没有限制。

Aspx代码:

View Code


 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MultipleFileUpload._Default" %>
 
 <!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>Untitled Page</title>
 
 <script type="text/javascript" language="javascript">
 function addFile() {
 var div = document.createElement("div");
 var f = document.createElement("input");
 f.setAttribute("type", "file")
 f.setAttribute("name", "File")
 f.setAttribute("size", "50")
 div.appendChild(f)
 var d = document.createElement("input");
 d.setAttribute("type", "button")
 d.setAttribute("onclick", "deteFile(this)");
 d.setAttribute("value", "Delete")
 div.appendChild(d)
 document.getElementById("_container").appendChild(div);
 }
 
 function deteFile(object) {
 while (object.tagName != "DIV") object = object.parentNode;
 object.parentNode.removeChild(object);
 }
 </script>
 
 </head>
 <body>
 <form id="form1" runat="server" method="post" enctype="multipart/form-data">
 <h3>
 Multiple File Upload</h3>
 UserName:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
 <div id="_container">
 <input type="file" size="50" name="File" runat="server" />
 </div>
 <div>
 <input type="button" value="Add File" οnclick="addFile()" runat="server" />
 </div>
 <div style="padding: 10px 0">
 <asp:Button runat="server" Text="Upload" ID="btnUpload" OnClick="btnUpload_Click">
 </asp:Button>
 </div>
 <div>
 <asp:Label ID="strStatus" runat="server" Font-Names="宋体" Font-Bold="True" Font-Size="9pt"
 Width="500px" BorderStyle="None" BorderColor="White"></asp:Label>
 </div>
 </form>
 </body>
 </html>

 

注意:前台<input>控件,需要添加<runat="server">才能在后台获取到。

 

View Code
 protected void btnUpload_Click(object sender, EventArgs e)
 {
 ///'遍历File表单元素
 HttpFileCollection files = HttpContext.Current.Request.Files;
 
 /// '状态信息
 System.Text.StringBuilder strMsg = new System.Text.StringBuilder("您输入的用户名是:" + TextBox1.Text + "<br/>");
 strMsg.Append("上传的文件分别是:<hr color='red'/>");
 try
 {
 for (int iFile = 0; iFile < files.Count; iFile++)
 {
 ///'检查文件扩展名字
 HttpPostedFile postedFile = files[iFile];
 string fileName, fileExtension;
 fileName = System.IO.Path.GetFileName(postedFile.FileName);
 if (fileName != "")
 {
 fileExtension = System.IO.Path.GetExtension(fileName);
 strMsg.Append("上传的文件类型:" + postedFile.ContentType.ToString() + "<br>");
 strMsg.Append("客户端文件地址:" + postedFile.FileName + "<br>");
 strMsg.Append("上传文件的文件名:" + fileName + "<br>");
 strMsg.Append("上传文件的扩展名:" + fileExtension + "<br><hr>");
 ///'可根据扩展名字的不同保存到不同的文件夹
 ///注意:可能要修改你的文件夹的匿名写入权限。
//保存的路径,用相对路径
 postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("images/") + fileName);
 }
 }
 strStatus.Text = strMsg.ToString();
 }
 catch (System.Exception Ex)
 {
 strStatus.Text = Ex.Message;
 }
 
 }

 

知识点:
1. 前台代码想要在后台取得,用runat="server"
2. js多文件上传
3. 上传文件用相对路径,在该Solutions下保证,已新建images文件夹。或者添加代码判断没有该文件夹存在时候,自动新建。
4. 取得上传文件的后缀名的方法

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值