HTML选择不同选项上传到不同的文件夹

html-css07

HTML选择不同选项上传到不同的文件夹,第1张

是为这个选项框添加一个javascript事件函数,对选项框作出选择就会触发事件,在事件函数里根据选项的不同决定跳转的地址。

是选项框选择时先不跳转,点击提交的时候才进行跳转,这个需要在提交按钮上添加一个提交前事件,同样是javascript,在javascript函数里实现跳转。

第三种是动态web,在form里指定一个action,跳转到一个处理页面上,在这个页上通过获取request的请求参数来决定跳转到哪个地址。

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言

HTML是由Web的发明者 Tim BernersLee和同事 Daniel WConnolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。

用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台UNIX, Windows等,使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件翻译成可以识别的信息,即现在所见到的网页。

给个例子吧:传几个地图文件到服务器

1)aspx文件:

<%@ Page language="c#" Codebehind="AddMap.aspx.cs" AutoEventWireup="false" Inherits="ZiFengLast.SystemSet.AddMap" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

<HEAD>

<title>MapAdmin</title>

<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">

<meta content="C#" name="CODE_LANGUAGE">

<meta content="JavaScript" name="vs_defaultClientScript">

<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

<LINK href="../StyleSheet1.css" type="text/css" rel="stylesheet">

<script language="javascript">

function AddFile()

{

var rows=document.getElementById("rows").value

var cols=document.getElementById("cols").value

var FileList=document.getElementById("MyFile")

if(document.getElementById("MyFile").innerHTML.toString().length>200)

{

// alert(document.getElementById("MyFile").innerHTML.toString().length)

FileList.innerHTML="<font class='TagTitle'><b>          第1个地图:</b></font><input style='WIDTH: 200pxHEIGHT: 22px' type='file' size='14' name='File'>"

}

for(i=1i<cols*rowsi++)

{

j=i+1

var str ='<font class="TagTitle"><b>          第'+j+'个地图:</b></font><input style="WIDTH: 200pxHEIGHT: 22px" type="file" size="14" name="File">'

FileList.insertAdjacentHTML("beforeEnd","<br>")

FileList.insertAdjacentHTML("beforeEnd",str)

}

}

</script>

</HEAD>

<body MS_POSITIONING="GridLayout">

<form id="Form1" method="post" encType="multipart/form-data" runat="server">

<FONT face="宋体">

<TABLE id="Table1" style="BORDER-RIGHT: #33cc66 2px grooveBORDER-TOP: #33cc66 2px grooveZ-INDEX: 101LEFT: 136pxBORDER-LEFT: #33cc66 2px grooveBORDER-BOTTOM: #33cc66 2px groovePOSITION: absoluteTOP: 32px"

width="500" align="center">

<TBODY>

<TR height="20">

<TD width="11%"> </TD>

<TD width="11%"> </TD>

<TD width="11%"> </TD>

<TD width="11%"> </TD>

<TD width="11%"> </TD>

<TD width="11%"> </TD>

<TD width="34%"> </TD>

</TR>

<TR>

<TD colSpan="2"> </TD>

<TD colSpan="4"><FONT class="WelcomeText" face="幼圆" color="#ff00ff" size="4">      添加新地图</FONT></TD>

</TR>

<tr>

<td class="TagTitle" align="right" colSpan="3"><b>请选择地图规格: </b></td>

<td class="TagTitle" colSpan="2"><input id="rows" style="WIDTH: 32pxHEIGHT: 22px" type="text" size="1" value="1" runat="server"

NAME="rows">行<input id="cols" style="WIDTH: 32pxHEIGHT: 22px" type="text" size="1" value="1" runat="server"

NAME="cols">列</td>

<td colSpan="2">  <input style="WIDTH: 72pxHEIGHT: 22px" onclick="AddFile()" type="button" value="确定"></td>

</tr>

<TR>

<TD class="TagTitle" align="right" width="33%" colSpan="3"><B>请选择地图文件:</B> 

</TD>

<TD class="TagTitle" width="33%" colSpan="4"></TD>

</TR>

<tr>

<td colSpan="7">

<p id="MyFile"><font class="TagTitle"><b>          第1个地图:</b></font>

<input style="WIDTH: 200pxHEIGHT: 22px" type="file" size="14" name="File">

</p>

</td>

<TR>

<TD class="TagTitle" align="right" width="33%" colSpan="3"><B>请输入地图存储名称:</B> 

</TD>

<TD class="TagTitle" align="left" width="33%" colSpan="4"><INPUT id="MapName" style="WIDTH: 128pxHEIGHT: 22px" type="text" size="16" name="Password"

runat="server">

<asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" CssClass="TagTitle" ErrorMessage="地图名不能为空"

Font-Names="微软雅黑" Font-Size="X-Small" ControlToValidate="MapName"></asp:requiredfieldvalidator></TD>

</TR>

<TR>

<TD class="TagTitle" style="HEIGHT: 29px" align="right" width="33%" colSpan="3"><B><asp:label id="Msg0" runat="server"></asp:label> </B>

</TD>

<TD class="TagTitle" style="HEIGHT: 29px" width="33%" colSpan="4"><span class="ErrorMessage" id="OutputSpan" runat="server"><asp:label id="Msg" runat="server"></asp:label></span></TD>

</TR>

<TR>

<TD width="11%"> </TD>

<TD width="11%"> </TD>

<TD width="22%" colSpan="4">      

<asp:button id="SubmitButton" runat="server" Font-Names="微软雅黑" Font-Size="X-Small" Text="提交"

Height="26px" Width="60px"></asp:button> <INPUT id="CancelButton" style="FONT-SIZE: x-smallWIDTH: 60pxFONT-FAMILY: 微软雅黑HEIGHT: 26px"

type="reset" value="清除" name="CancelButton"></TD>

<TD width="34%"> 

</TD>

</TR>

</TBODY>

</TABLE>

<TABLE id="Table2" style="Z-INDEX: 102LEFT: 136pxWIDTH: 491pxPOSITION: absoluteTOP: 8pxHEIGHT: 26px"

width="491" align="center">

<TR>

<TD class="TagTitle"><A href="DeleteMap.aspx"><FONT class="WelcomeText" face="幼圆">删除已有地图</FONT></A></TD>

</TR>

</TABLE>

</FONT>

</form>

</TR></TBODY></TABLE></FONT>

</body>

</HTML>

2)后台cs文件:关键是使用Request.Files获取刚上传的文件:

using System

using System.Collections

using System.ComponentModel

using System.Data

using System.Drawing

using System.Web

using System.Web.SessionState

using System.Web.UI

using System.Web.UI.WebControls

using System.Web.UI.HtmlControls

using System.Configuration

namespace ZiFengLast.SystemSet

{

/// <summary>

/// MapAdmin 的摘要说明。

/// </summary>

public class AddMap : System.Web.UI.Page

{

protected System.Web.UI.WebControls.Button SubmitButton

protected System.Web.UI.WebControls.RequiredFieldValidator RequiredFieldValidator2

protected System.Web.UI.HtmlControls.HtmlGenericControl OutputSpan

protected System.Web.UI.WebControls.Label Msg

protected System.Web.UI.WebControls.Label Msg0

protected System.Data.SqlClient.SqlConnection MapConn

protected System.Data.SqlClient.SqlCommand MapComm

protected System.Web.UI.HtmlControls.HtmlInputText rows

protected System.Web.UI.HtmlControls.HtmlInputText cols

protected System.Web.UI.HtmlControls.HtmlInputText MapName

private void Page_Load(object sender, System.EventArgs e)

{

// 在此处放置用户代码以初始化页面

}

#region Web 窗体设计器生成的代码

override protected void OnInit(EventArgs e)

{

//

// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。

//

InitializeComponent()

base.OnInit(e)

}

/// <summary>

/// 设计器支持所需的方法 - 不要使用代码编辑器修改

/// 此方法的内容。

/// </summary>

private void InitializeComponent()

{

this.MapConn = new System.Data.SqlClient.SqlConnection()

this.MapComm = new System.Data.SqlClient.SqlCommand()

this.SubmitButton.Click += new System.EventHandler(this.SubmitButton_Click)

//

// MapConn

//

this.MapConn.ConnectionString =System.Configuration.ConfigurationSettings.AppSettings["sqlMap"]

//

// MapComm

//

this.MapComm.Connection = this.MapConn

this.Load += new System.EventHandler(this.Page_Load)

}

#endregion

private void SubmitButton_Click(object sender, System.EventArgs e)

{

try

{

HttpFileCollection file=Request.Files

System.Text.StringBuilder FileNameArray=new System.Text.StringBuilder()

string SaveName=this.MapName.Value.Trim()

string FileExtension0=System.IO.Path.GetExtension(System.IO.Path.GetFileName(file[0].FileName))

for(int i=0i<file.Counti++)

{

HttpPostedFile PostFile=file[i]

string FileName=System.IO.Path.GetFileName(PostFile.FileName)

FileName.Replace("","_")

string FileExtension=System.IO.Path.GetExtension(FileName)

string ContentType=PostFile.ContentType.ToString()

string LastSaveName=SaveName+(i+1).ToString()+FileExtension

PostFile.SaveAs(Request.MapPath("../Map/"+LastSaveName))

FileNameArray.Append(LastSaveName)

FileNameArray.Append("")

}

this.MapComm.CommandText="Select [Map].* from [Map] where MapName='"+SaveName+"'"

this.MapConn.Open()

System.Data.SqlClient.SqlDataReader rd=this.MapComm.ExecuteReader()

if(rd.Read())

{

this.MapConn.Close()

this.MapConn.Dispose()

this.MapComm.Dispose()

rd.Close()

Msg0.Text="<font class=ErrorMessage>上传文件失败!</font>"

Msg.Text="<font class=ErrorMessage>已有该地图名称,请指定另外的名称</font>"

}

else

{

rd.Close()

this.MapComm.CommandText="insert into [Map](MapName,MapRows,MapCols,MapFileNames) Values('"+SaveName+"',"+int.Parse(rows.Value)+","+int.Parse(cols.Value)+",'"+FileNameArray+"')"

//Response.Write(MapComm.CommandText)

this.MapComm.ExecuteNonQuery()

this.MapConn.Close()

this.MapConn.Dispose()

this.MapComm.Dispose()

}

Msg0.Text="<font class=ErrorMessage>上传文件成功!</font>"

Msg.Text="<font class=ErrorMessage>共计上传文件"+file.Count.ToString()+"个"+"<br>"+FileNameArray+"</font>"

}

catch(Exception ee)

{

Msg0.Text="<font class=ErrorMessage>上传文件失败!</font>"

Msg.Text="<font class=ErrorMessage>"+ee.ToString()+"</font>"

}

}

}

}