关注我
示例代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>动态实现图片的上传 删除 等</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="photoUserPhotoTable" border="0" style="margin-top: 0px; margin-left: 0px;">
<tr>
<td style="height:30px;">
<span style="color:#FF9600">请上传您的照片，可以添加多张</span>
</td>
</tr>
<tr id="trPhotoUserPhoto1">
<td id="tdPhotoUserPhotoTr1" style="text-align:left;">
<input type="file" id="fuPhotoUserPhoto1" name="fuPhotoUserPhoto1" class="inputText" style="width:200px;" />
<input type="button" class="inputButton" style="width:70px;" value="上 传" onclick="ajaxFileUpload('fuPhotoUserPhoto1', 'trPhotoUserPhoto1', 'tdPhotoUserPhotoTr1');" />
</td>
</tr>
<tr>
<td style="text-align:left;">
<input id="btnInsertPhotoUserPhoto" type="button" class="inputButton" value="插入图片" onclick="insertRow_photo()" />
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//global var
var insertPos_photo = 2
//to insert a row in the place
function insertRow_photo() {
var trId = "trPhotoUserPhoto" + insertPos_photo;
var tdId = "tdPhotoUserPhotoTr" + insertPos_photo;
var fuId = "'fuPhotoUserPhoto" + insertPos_photo + "'";
var row = document.getElementById("photoUserPhotoTable").insertRow(insertPos_photo);
row.id = trId;
var cell = row.insertCell(0);
cell.id = tdId;
var reTrId = "'trPhotoUserPhoto" + insertPos_photo + "'";
var reTdId = "'tdPhotoUserPhotoTr" + insertPos_photo + "'";
var content = '<input type="file" id="fuPhotoUserPhoto' + insertPos_photo + '" name="' + fuId + '" class="inputText" style="width:200px;" />'
+ ' '
+ ' <input type="button" class="inputButton" style="width:70px;" value="上 传" onclick="ajaxFileUpload(' + fuId + ',' + reTrId + ',' + reTdId + ');" />';
cell.innerHTML = content;
insertPos_photo++;
}
function ajaxFileUpload(fuId, trId, tdId) {
var reTrId = "'" + trId + "'";
var tdCell = document.getElementById(tdId);
tdCell.innerHTML = '<input type="text" value="' + tdId + '" class="inputText" style="width:200px;" />'
+ ' '
+ ' <input type="button" class="inputButton" style="width:70px;" value="删 除" onclick="trHide(' + reTrId + ');" />';
}
function trHide(trId) {
$("#"+trId).hide();
}
</script>
</body>
</html>