繼上一篇「ASP.NET 利用JavaScript達到多檔上傳」，這次我想在每個檔案上傳的地方個別再加上移除檔案的按鈕，除了第一個檔案上傳之外，當我不要這個檔案的時候，我就可以移除我不要的檔案。
執行結果
Step 1.請在另外建立一個aspx檔案，檔名為test_multi-file_fileupload2.aspx，程式碼如下：
紅色的字是我而外加上去的，橘色的底是我有修改過的地方，請先看前一篇的作法。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test_multi-file_fileupload2.aspx.vb" Inherits="test_multi_file_fileupload2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function addFileUploadBox() {
if (!document.getElementById || !document.createElement) {
return false;
};
//取得id叫作upload-area元素
var uploadArea = document.getElementById('upload-area');
if (!uploadArea) {
return false;
};
//建立br元素(在Html中叫作換行)
var newLine = document.createElement('br');
//在upload-area中加入換行
uploadArea.appendChild(newLine);
//建立input元素
var newUploadBox = document.createElement('input');
newUploadBox.type = 'file'; //input的類型為file檔案類型
newUploadBox.size = '40';
if (!addFileUploadBox.lastAssignedId) {
addFileUploadBox.lastAssignedId = 1;
};
//設定input的id、name
newUploadBox.setAttribute('id', 'FileF' + addFileUploadBox.lastAssignedId);
newUploadBox.setAttribute('name', 'FileF:' + addFileUploadBox.lastAssignedId);
uploadArea.appendChild(newUploadBox);
//=======================
//建立input元素-移除檔案 按鈕
var newBRF = document.createElement('input');
newBRF.setAttribute('type', 'button');
newBRF.setAttribute('value', '移除檔案');
newBRF.setAttribute('onclick', 'RemoveFile(' + addFileUploadBox.lastAssignedId + ');');
//設定input按鈕的id、name
newBRF.setAttribute('id', 'BRF' + addFileUploadBox.lastAssignedId);
newBRF.setAttribute('name', 'BRF:' + addFileUploadBox.lastAssignedId);
uploadArea.appendChild(newBRF);
//=======================
addFileUploadBox.lastAssignedId++;
};
function RemoveFile(tempid) {
var uploadArea = document.getElementById('upload-area');
if (!uploadArea) {
return false;
};
//利用id取得file元素
var UploadBox = document.getElementById('FileF' + tempid);
var preItem = prevSib(UploadBox); //尋找type=File的上一個節點，也就是br元素
if (preItem != null) {
//有找到就不等於null，代表有找到br
uploadArea.removeChild(preItem);
};
//利用id取得button元素
var BRF = document.getElementById('BRF' + tempid);
uploadArea.removeChild(UploadBox); //移除file
uploadArea.removeChild(BRF); //移除button
};
//此處參考http://blog.kkbruce.net/2012/02/javascript-w3c-dom.html#.WXViWISGOUm
function prevSib(node) {
var tempFirst = node.parentNode.firstChild; //取得node的第一個節點
if (node == tempFirst) { //是否為第一個節點
return null;
}
var tempObj = node.previousSibling; //非第一個，可往上找上一個Node
while (tempObj.nodeType != 1 && tempObj.previousSibling != null) //nodeType不是元素節點且不是第一個，即找到元素節點為止
tempObj = tempObj.previousSibling; //往上找上一個
return (tempObj.nodeType == 1) ? tempObj : null; //如果是元素節點，傳回節點本身，否則傳回null
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>測試多檔上傳，加上移除檔案按鈕</h1>
附加檔案：<br/>
<p id="upload-area">
<input id="FileField" type="File" runat="server" size="40" />
</p>
<input id="ButtonAdd" type="button" value="繼續附加" onclick="addFileUploadBox();" />
<asp:Button ID="Button1" runat="server" Text="開始上傳" /><span style=" color:red;">檔案附加不可超過10MB</span><br/>
<asp:Label ID="Send_msg" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Step 2.後置程式碼一樣沒有變，請自行參考前一篇。
沒有留言:
張貼留言