示例代码如下:
<%@ 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>