添加HTML内容与文本内容以前用的是innerHTML与innerText方法,最近发现还有insertAdjacentHTML和insertAdjacentText方法,这两个方法更灵活,可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法:在指定的地方插入html标签语句
原型:insertAdajcentHTML(swhere,stext)
参数:
swhere: 指定插入html标签语句的地方,有四种值可用:
1. beforeBegin: 插入到标签开始前
2. afterBegin:插入到标签开始标记之后
3. beforeEnd:插入到标签结束标记前
4. afterEnd:插入到标签结束标记后
stext:要插入的内容
运用js---增加一个上传控件代码:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<script type="text/javascript">
var i=1
function addFile()
{
if (i<8)
{var str = '<BR> <input type="file" name="File" runat="server" style=" 200px"/>描述:<input name="text" type="text" style=" 150px" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
{
alert("您一次最多只能上传8张图片!")
}
i++
}
</script>
完整代码:
后台:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;
//该源码下载自www.51aspx.com(51aspx.com)
namespace DuoWenJianShangChuan
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnUpload_Click(object sender, EventArgs e)
{
{
lblMessage.Text = "";
lblMessage.Visible = false;
System.Web.HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;
System.Text.StringBuilder strmsg = new System.Text.StringBuilder("");
string[] rd = Request.Form[1].Split(',');//获得图片描述的文本框字符串数组,为对应的图片的描述
//string albumid=ddlAlbum.SelectedValue.Trim();
int ifile;
for (ifile = 0; ifile < files.Count; ifile++)
{
if (files[ifile].FileName.Length > 0)
{
System.Web.HttpPostedFile postedfile = files[ifile];
if (postedfile.ContentLength / 1024 > 4096)//单个文件不能大于1024k
{
strmsg.Append(Path.GetFileName(postedfile.FileName) + "---不能大于4096k<br>");
break;
}
string fex = Path.GetExtension(postedfile.FileName);
if (fex != ".jpg" && fex != ".JPG" && fex != ".gif" && fex != ".GIF" && fex != ".doc" && fex != ".mp3")
{
strmsg.Append(Path.GetFileName(postedfile.FileName) + "---图片格式不对,只能是jpg或gif<br>");
break;
}
}
}
if (strmsg.Length <= 0)//说明图片大小和格式都没问题
{
//以下为创建图库目录
string dirpath = Server.MapPath("51aspx");
if (Directory.Exists(dirpath) == false)
{
Directory.CreateDirectory(dirpath);
}
Random ro = new Random();
int name = 1;
for (int i = 0; i < files.Count; i++)
{
System.Web.HttpPostedFile myFile = files[i];
string FileName = "";
string FileExtention = "";
FileName = System.IO.Path.GetFileName(myFile.FileName);
string stro=ro.Next(100,100000000).ToString()+name.ToString();//产生一个随机数用于新命名的图片
string NewName =DateTime.Now.Minute.ToString() + DateTime.Now.Second.ToString()+DateTime.Now.Millisecond.ToString()+stro;
if (FileName.Length > 0)//有文件才执行上传操作再保存到数据库
{
FileExtention = System.IO.Path.GetExtension(myFile.FileName);
string ppath = dirpath + @"\" + NewName + FileExtention;
myFile.SaveAs(ppath);
}
name = name + 1;//用来重命名规则的变量
}
Response.Write("<script>alert('恭喜,图片上传成功!')</script>");
}
else
{
lblMessage.Text = strmsg.ToString();
lblMessage.Visible = true;
}
}
}
}
}
前台:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DuoWenJianShangChuan._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>ASP.NET(C#)实现一次性上传多张图片(多个文件)</title>
<script type="text/javascript">
var i=1
function addFile()
{
if (i<8)
{var str = '<BR> <input type="file" name="File" runat="server" style=" 200px"/>描述:<input name="text" type="text" style=" 150px" maxlength="20" />'
document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
}
else
{
alert("您一次最多只能上传8张图片!")
}
i++
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="Table1" align="center" border="0" cellpadding="1" cellspacing="1" class="table"
<tr>
<td align="center">
<font color="#0000ff" face="宋体" size="3"><strong>上传图片</strong></font></td>
</tr>
<tr>
<td align="center" style=" 734px">
</td>
</tr>
<tr>
<td align="center" style=" 734px">
<asp:Panel ID="Panel5" runat="server">
<table width="100%">
<tr>
<td align="right" style=" 100px">
</td>
<td align="left" style=" 500px">
说明:点增加图片按钮可一次上传多张图片,可为每张图片写上一句不超过20个字的描述。单张图片大小不大于1024k</td>
</tr>
<tr>
<td align="right" style=" 100px">
请选择图片:<br />
</td>
<td align="left" style=" 500px"><P id="MyFile"><INPUT onclick="addFile()" type="button" value="增加图片(Add)"><br />
<input id="File1" type="file" name="File" runat="server" style=" 245px"/>
描述:<input name="text" type="text" style=" 150px" maxlength="20" />
</td>
</tr>
<tr>
<td align="right" style=" 100px">
</td>
<td align="left" style=" 500px">
<asp:Button ID="btnUpload" runat="server" Text="开始上传" OnClick="btnUpload_Click" />
</td>
</tr>
<tr>
<td align="right" style=" 100px">
</td>
<td align="left" style=" 500px">
<asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label></td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td align="center" style=" 734px">
<font face="宋体"></font><font face="宋体"> </font>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>