双文件上传html|用html5进行多文件上传的时候是一次性把所有已选择文件传到后台么

|

1. 多文件上传思路

给个例子吧:传几个地图文件到服务器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: 200px; HEIGHT: 22px' type='file' size='14' name='File'>"; } for(i=1;i<cols*rows;i++) { j=i+1; var str ='<font class="TagTitle"><b>第'+j+'个地图:</b></font> <input style="WIDTH: 200px; HEIGHT: 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 groove; BORDER-TOP: #33cc66 2px groove; Z-INDEX: 101; LEFT: 136px; BORDER-LEFT: #33cc66 2px groove; BORDER-BOTTOM: #33cc66 2px groove; POSITION: absolute; TOP: 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: 32px; HEIGHT: 22px" type="text" size="1" value="1" runat="server" NAME="rows">行<input id="cols" style="WIDTH: 32px; HEIGHT: 22px" type="text" size="1" value="1" runat="server" NAME="cols">列</td> <td colSpan="2"><input style="WIDTH: 72px; HEIGHT: 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: 200px; HEIGHT: 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: 128px; HEIGHT: 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-small; WIDTH: 60px; FONT-FAMILY: 微软雅黑; HEIGHT: 26px" type="reset" value="清除" name="CancelButton"></TD> <TD width="34%"> </TD> </TR> </TBODY> </TABLE> <TABLE id="Table2" style="Z-INDEX: 102; LEFT: 136px; WIDTH: 491px; POSITION: absolute; TOP: 8px; HEIGHT: 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=0;i<file.Count;i++) { 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>"; } }}}

2. 怎么通过HTML+PHP上传文件到服务器

HTML代码:


<body>

<form action="" method="post" enctype="multipart/form-data" name="upload_form">

<label>选择图片文件</label>

<input name="imgfile" type="file" accept="image/gif, image/jpeg"/>

<input name="upload" type="submit" value="上传" />

</form>

</body>


PHP代码:


if (isset($_FILES['imgfile'])

&& is_uploaded_file($_FILES['imgfile']['tmp_name']))

{

$imgFile = $_FILES['imgfile'];

$upErr = $imgFile['error'];

if ($upErr == 0)

{

$imgType = $imgFile['type']; //文件类型。

/* 判断文件类型,这个例子里仅支持jpg和gif类型的图片文件。*/

if ($imgType == 'image/jpeg'

|| $imgType == 'image/gif')

{

$imgFileName = $imgFile['name'];

$imgSize = $imgFile['size'];

$imgTmpFile = $imgFile['tmp_name'];

/*

将文件从临时文件夹移到上传文件夹中。

注意:upfile这个文件夹必须先创建好,不然会报错。

*/

move_uploaded_file($imgTmpFile, 'upfile/'.$imgFileName);

/*显示上传后的文件的信息。*/

$strPrompt = sprintf("文件%s上传成功<br>"

. "文件大小: %s字节<br>"

. "<img src='upfile/%s'>"

, $imgFileName, $imgSize, $imgFileName

);

echo $strPrompt;

}

else

{

echo "请选择jpg或gif文件,不支持其它类型的文件。";

}

}

else

{

echo "文件上传失败。<br>";

switch ($upErr)

{

case 1:

echo "超过了php.ini中设置的上传文件大小。";

break;

case 2:

echo "超过了MAX_FILE_SIZE选项指定的文件大小。";

break;

case 3:

echo "文件只有部分被上传。";

break;

case 4:

echo "文件未被上传。";

break;

case 5:

echo "上传文件大小为0";

break;

}

}

}

else

{

}


3. 谁有springmvc multipartfile html5 多文件上传的示例代码,急!急!急!

<formid="fileUpload"action="<%=basePath%>template/fileUpload.do"enctype="multipart/form-data"method="post"class="form-horizontal"><divclass="modal-header"><buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">&times;</button><h4class="modal-title"id="myModalLabel"style="color:#15428b;">上传</h4></div><divclass="modal-body"><inputtype="file"name="targetFile"><inputtype="file"name="targetFile"><inputtype="file"name="targetFile"></div><divclass="modal-footer"><buttonid="cancel"type="button"class="btnbtn-default"data-dismiss="modal">取消</button><buttontype="button"class="btnbtn-primary"onclick="uploadFile();">确认</button></div></form>@RequestMapping(value="/fileUpload.do")publicStringfileUpload(Modelmodel,@RequestParamMultipartFile[]targetFile,HttpServletRequestrequest,PageSplit<BankVo>pageSplit){try{FileOperationsUtil.uploadFileMVC(request,targetFile,"/files/temporary");model.addAttribute("msg","文件上传成功!");}catch(Exceptione){logger.error(e);model.addAttribute("msg","文件上传失败!");}returnthis.allButton(model,request,pageSplit);}publicstaticvoiploadFileMVC(HttpServletRequestrequest,MultipartFile[]fileSource,StringfileTarget){for(MultipartFilefile:fileSource){if(file.isEmpty()){System.out.println("文件未上传");}else{//如果用的是Tomcat服务器,则文件会上传到\%TOMCAT_HOME%\webapps\项目\fileTarget\文件夹中StringrealPath=request.getSession().getServletContext().getRealPath(fileTarget);//这里不必处理IO流关闭的问题,因为FileUtils.InputStreamToFile()方法内部会自动把用到的IO流关掉,我是看它的源码才知道的try{FileUtils.InputStreamToFile(file.getInputStream(),newFile(realPath,file.getOriginalFilename()));}catch(IOExceptione){//TODOAuto-generatedcatchblocke.printStackTrace();}}}}

4. 在html页面里面制作一个上传图片的区域,就是点那个区域,就能上传照片,这个html代码应该怎么写

你好,html上传文件的代码如下:

<inputtype="file"name="fileUpload"/><inputtype="submit"value="上传文件"/>

至于你要说的有个区域显示图片的,这个需要配合前端开发才可以,单纯的html代码是做不到的,谢谢。

5. 如何用HTML上传文件,以及用HTML发送信息到自己的服务器

上传文件用input标签:<form enctype="multipart/form-data"><input type="file" /></form>后半句没明白啥意思

6. 求助,html页面里,写多文件上传,在controller进行后台处理文件数据

”及时响应数据“这句话没理解错的话应该就是异步更新的意思吧!用MVC3有两个个好东西你一定要知道的:一个是AJAX.BegionForm,还有一个AJAX.ActionLink这两个是MVC3中提供的异步刷新处理数据的两个小玩意,可以学习下;根据楼主的需求,当用户输入的时候就需要响应数据,那以上的两个方法都不行;因为楼主的需求是需要触发JS事件的,所以可以考虑用JS实现的异步提交,或者JQ;下面JS代码:<script type="text/javascript"> var xmlhttp; function loadXMLDoc(url, cfunc) { //根据浏览器的不同选择初始化 if (window.XMLHttpRequest) { // Mozilla, Safari,… xmlhttp = new XMLHttpRequest(); if (xmlhttp.overrideMimeType) { xmlhttp.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // 判断各种浏览器 try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.4.0"); } catch (e) { alert("页面加载错误!"); return; } } } } else { alert("页面加载错误!"); return; } //End xmlhttp.onreadystatechange = cfunc; xmlhttp.open("GET", url, true); xmlhttp.send(); }// 使用 Callback 函数 function myFunction(id) { loadXMLDoc("./AJAX/TimeTxt.cshtml?ID="+id, function () { //此地址为Action的地址,就是C层控制器的URl,这里需要根据你的需求来改,ID实际上就是传入的数据,ID在C层获取就行业务逻辑操作。 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText;//此为响应返回的数据把他放在一个ID为myDiv的div里面,比如return “hello”; div里面则显示hello. } }); }</script><input type="text" onblur="myFunction(this.value)" name="id" value="" /> //这句话的意思就是当用户输入完成时离开text的时候执行JS事件<div id="myDiv"></div>基本上就是这样了,不知道符合你的需求不!

7. 请教HTML5中多文件上传时如控制可选择文件的个数

<!DOCTYPEHTML><html><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><body><scripttype="text/javascript">functiononc(){varfiles=document.getElementById("input").files;for(vari=0;i<files.length;i++){alert(input.files[i].name);}}</script><inputtype="file"id="input"name="input"multiple="multiple"/><buttononclick="onc()">查看文件</button></form><p>请尝试在浏览文件时选取一个以上的文件。</p></body></html>

8. 用html5进行多文件上传的时候是一次性把所有已选择文件传到后台么

html传多个文件对前端来说是一股脑的提交,但是其实主要还是看后台是如版何接收的。后台可权以设置一次性接收的文件数据,文件大小等等。其实就和平时的上传下载是一样的。以下载为例:下载的时候,比如用迅雷下载,你的本机是否可以选择并行下载、逐个下载还可以停止、继续下载。同样的,上传也是一个类似的过程,主要依靠服务器代码进行管理设置。本质上,是两个计算机之间相互传递数据流而已。当然,在默认的时候,服务器是接收多个文件的,比如javaweb中struts2接收文件默认是接收完所有文件然后再操作的。

9. html上传文件代码

html前端代码:

<html><body><formaction="upload-file.php"method="post"enctype="multipart/form-data"><labelfor="file">文件名:</label><inputtype="file"name="file"id="file"/><br/><inputtype="submit"name="submit"value="提交"/></form></body></html>

如果是ubuntu上部署apache2,你应该是php开发者吧,action="upload-file.php" 中的upload-file.php改为你自己的后端php接收文件的逻辑代码即可!

这里提供upload-file.php后端接收文件的代码:

<?phpif($_FILES["file"]["error"]>0){echo"错误:".$_FILES["file"]["error"]."<br/>";}else{echo"文件名:".$_FILES["file"]["name"]."<br/>";echo"类型:".$_FILES["file"]["type"]."<br/>";echo"大小:".($_FILES["file"]["size"]/1024)."Kb<br/>";}if(file_exists("upload/".$_FILES["file"]["name"])){echo$_FILES["file"]["name"]."文件已经存在.";}else{move_uploaded_file($_FILES["file"]["tmp_name"],"upload/".$_FILES["file"]["name"]);echo"文件已经被存储到:"."upload/".$_FILES["file"]["name"];}?>

代码很简单,我相信你应该能看懂,这里的 文件夹 upload/ 需要你自己手动创建,请确保文件路径正取!

我也是web开发者,有问题可继续追问我!或是加我工作室QQ(540144097),在群里向我提问!有问必答,望采纳……


赞 (0)