多檔案上傳 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" onclick="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. 取得上傳檔案的尾碼名的方法
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
