多文件上传

    添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)

参数：

swhere: 指定插入html标签语句的地方，有四种值可用：

1.     beforeBegin: 插入到标签开始前

2.     afterBegin:插入到标签开始标记之后

3.     beforeEnd:插入到标签结束标记前

4.     afterEnd:插入到标签结束标记后

stext：要插入的内容

运用js---增加一个上传控件代码:

 <script type="text/javascript">
        var i=1
        function addFile()
        {
     
         if (i<8)
            {var str = '<BR> <input type="file" name="File" runat="server" style="width: 200px"/>描述：<input name="text" type="text" style="width: 150px" maxlength="20" />'
              document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
        
            }
        else
            {
                alert("您一次最多只能上传8张图片！")
            }
            i++
        }
        </script>
        

完整代码:

 后台:

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(５１ａｓｐｘ．ｃｏｍ)

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;
        }
    }

        }

    }
}

前台:

 

<%@ 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="width: 200px"/>描述：<input name="text" type="text" style="width: 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="width: 734px">
                    &nbsp;</td>
            </tr>
            <tr>
                <td align="center" style="width: 734px">
                    <asp:Panel ID="Panel5" runat="server">
                        &nbsp; &nbsp;<table width="100%">
                            <tr>
                                <td align="right" style="width: 100px">
                                </td>
                                <td align="left" style="width: 500px">
                                    说明：点增加图片按钮可一次上传多张图片，可为每张图片写上一句不超过20个字的描述。单张图片大小不大于1024k</td>
                            </tr>
                            <tr>
                                <td align="right" style="width: 100px">
                                    请选择图片：<br />
                                </td>
                                <td align="left" style="width: 500px"><P id="MyFile"><INPUT onclick="addFile()" type="button" value="增加图片(Add)"><br />
                                    <input id="File1" type="file" name="File" runat="server" style="width: 245px"/>
                                    描述：<input name="text" type="text" style="width: 150px" maxlength="20" />
                                </td>
                            </tr>

                            <tr>
                                <td align="right" style="width: 100px">
                                </td>
                                <td align="left" style="width: 500px">
                                    <asp:Button ID="btnUpload" runat="server" Text="开始上传" OnClick="btnUpload_Click" />
                                    </td>
                            </tr>
                            <tr>
                                <td align="right" style="width: 100px">
                                </td>
                                <td align="left" style="width: 500px">
                                    <asp:Label ID="lblMessage" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label></td>
                            </tr>
                        </table>
                    </asp:Panel>
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td align="center" style="width: 734px">
                    <font face="宋体"></font><font face="宋体">&nbsp;</font>
                </td>
            </tr>
        </table>
    
    </div>

    </form>
</body>
</html>