html5多文件上传
① js获取HTML5 多文件file选择的数量
1、并没有原生的方法控制个数。
2、解决办法：等选择完了用js去计算有多少个，如果超出了就提示。思路如下：
1）你可以在选择完文件后，你的input的onchange事件中，判断event.target.files.length就可以知道你的文件多少了。
2）在onchange事件中使用
if (event.target.files.length > 10) {
console.log("图片太多啦！超过十张啦！");
let files = event.target.files
files = Array.from(files).slice(0,10)
//此处写你的上传接口，参数就是files
console.log("只上传10张哦",files)
}
这个方法可以限制文件只需要上传选中的前10个。
(1)html5多文件上传扩展阅读：
1、关于input标签上传文件，还有一个属性是accept。可以限制只能上传图片类型，这样可以避免用户上传很多非图片的文件，不好处理。使用方法：<inputid="File1" type="file" accept="image/*" />
2、调用接口上传文件的方法，可以使用FormData,FromData 是一次http mulitpartfrom-data的请求内容可以使用 append 方法向其添加名词对,然后使用 XMLHttpRequest 的 send() 方法发送.
eg:
var fileObj = new FromData();
fileObj.append('key',value); // value 可以是一个字符串 string 也可以是一个 blob （代表，file对象）
var xhr = new XMLHttpRequest();
xhr.open('POST','url',true);
xhr.send(fileObj);
② 如何在手机浏览器中运用HTML5的文件API实现上传多图功能
Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能，还有一些网站继续采用Html <form>with enctype=multipart/form-data，但是需要修改服务器端可用才能显示给用户文件上传的进度。本质上你需要做的工作是在服务器端接收一个文件时，你发送给它一个字节流，所以你需要知道你已经接收到多少字节并以某种方式传达这些信息给客户端浏览器，在这个过程一直在不断的进行文件的上传。这种方式运行的非常好，不像Flash上传那这样充满了问题(特别是处理大文件上传的时候)，然而这种方法是相当复杂的并且听起来不容易理解，因为你本质上是接管了整个服务器端的处理（获取字节流的时候）同时包括了在服务器端实现multipart/form-data协议，伴随一系列的其他事情。
使用Html5 上传文件
XMLHttpRequest 在Html5 规范中已经有全新的变化，规定了XMLHttpRequest Level 2规范（目前最新版本）包含下列新的特性：
处理字节流，例如作为上传或者下载的File，Blob，FormData对象
上传或者下载中的进度事件
跨站点请求
允许创建匿名请求
可以设置请求超时
在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常，上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户，需要注意的是这种方式解决了不需要服务器端做任何改变，至少是目前处理multipart/form-data协议。所以服务器端的处理逻辑保留不变，这使得开发者适应这种技术相当容易。
图1：文件上传画面-准备上传 图2：显示上传完成画面
注意：上面的图片中，信息提示区域是提供给用户的：
当前选中文件的信息
文件名
文件大小
文件类型
上传完成多少的百分比进度条
上传速度或者上传带宽
距离上传完成大概还有多长时间
已上传文件大小
服务器端的响应
上面第6项或许看起来不重要，但事实上是相当重要的。因为我们用XMLHttpRequest，上传发生在后台，页面没有发生跳转等任何变化，所以对于你用它处理其他一些事情来说是一个非常好的特性。
Html5 Progress Event
对于Html5 Progress Events规范，Html5 Progess Events提供了下列与本次讨论相关的信息
total - 总的字节数
loaded - 到目前为止上传的字节数
lengthComputable - 可计算的已上传字节
请注意到我们需要用两个信息去计算要显示给用户的其他所有信息。要计算出来其他的信息通过上面我们得到信息是相当容易的，但是那需要一些额外的代码并且创建一个定时器。
Html5 Progress Event 应该是什么
考虑到有一部分人想更好的提供给用户所有的信息，所以Html5 Progress Event应该更好的满足需要，因为它给浏览器供应商提供这些额外信息是相当简单的，所以建议progress event应该修改成如下：
total - 总的字节数
loaded - 到目前为止上传的字节数
lengthComputable - 可计算的已上传字节
transferSpeed long类型
timeRemaining javaScript 日期对象
Html5 上传 用XMLHttpRequest
浏览器支持情况
支持这一特性的浏览器最低版本
Firefox 4.0 beta 6
Chrome 6
Safari 5.02
IE 9 Beta and Opera 10.62 不支持这一特性
简单的示例
下面是一个完整的Html页面包含了实现文件上传并带有进度提示的JavaScript代码，只是实现了基本的功能，感兴趣的可以自己做扩展。 需要吧上传接口修改成自己服务的。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest - Minimal</title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "upload.do");//修改成自己的接口
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* 服务器端返回响应时候触发event事件*/
alert(evt.target.responseText);
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
</script>
</head>
<body>
<form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
<div class="row">
<label for="fileToUpload">Select a File to Upload</label><br />
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
</form>
</body>
</html>
③ 用html5进行多文件上传的时候是一次性把所有已选择文件传到后台么
html传多个文件对前端来说是一股脑的提交，但是其实主要还是看后台是如何接收的。后台可以设置一次性接收的文件数据，文件大小等等。其实就和平时的上传下载是一样的。
以下载为例：下载的时候，比如用迅雷下载，你的本机是否可以选择并行下载、逐个下载还可以停止、继续下载。同样的，上传也是一个类似的过程，主要依靠服务器代码进行管理设置。本质上，是两个计算机之间相互传递数据流而已。
当然，在默认的时候，服务器是接收多个文件的，比如javaweb中struts2接收文件默认是接收完所有文件然后再操作的。
④ 谁有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">×</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-generatedcatchblock
e.printStackTrace();
}
}
}
}
⑤ 不使用HTML5，JS怎样上传文件
不写标签让用户选择文件，用户要在那里找选择上传文件的入口？
JS上传文件很多，某度搜索“JS上传文件示例”就很多了。
例如我自己之前写的：
⑥ 请教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>
⑦ html5超大文件上传如何实现
后端code
<?php
class Upload{
private $filepath = './upload'; //上传目录
private $tmpPath; //PHP文件临时目录
private $blobNum; //第几个文件块
private $totalBlobNum; //文件块总数
private $fileName; //文件名
private $md5FileName;
public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName, $md5FileName){
$this->tmpPath = $tmpPath;
$this->blobNum = $blobNum;
$this->totalBlobNum = $totalBlobNum;
$this->fileName = $this->createName($fileName, $md5FileName);
$this->moveFile();
$this->fileMerge();
}