A. html5超大文件上传如何实现
后端code<?phpclass 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();}
B. 如何使用html5的FileApi上传大文件
根本不需要那么麻烦，装一个扩展就实现了，代码都不用写。 AetherUpload-Laravel提供超大文件上传专的Laravel扩展包，支持属分组配置、断线续传、秒传等功能，简单易用，满足多数人的主流需求，无需编写适配代码，几乎开箱即用。
C. 移动开发中，遇到了安卓不能支持HTML5文件上传的问题，怎么解决
PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。
用的技术主要是：
ajax；
FileReader；
FormData；
HTML结构：
D. html5可以通过路径上传文件么
这个当然可以 只需要有合适的插件支持即可
E. 在html5制作的网页在ipad 2.0 下怎么实现上传文件 – HTML5技术探讨 –
这和系统有关,看自带的系统是4.33 还是5+印象中在“设置”-”通用“-里找到浏览器看看信息没具体试过 查看更多答案>>
F. html5新技术有哪些
微数据（Microdata）HTML5 定义了一个标准化方法来标记 HTML 文档主体的元数据。对于使用过微格式（如 hCard 和 hCalendar） 的人来说，对微数据会很熟悉，但其中还有一些重要的不同之处。最重要的是，微数据将相关信息从此前微格式控制的类移到了新的 itemprop 属性中。另外，此标准添加了其他能精确定义微数据格式的属性，以及一个可以直接通过程序访问微数据的方法：itemscope 设置微数据段的范围。itemtype 提供了定义可用的具体数据格式的 URL。document.getItems() 提供对顶层微数据条目的访问；此方法会返回一个 NodeList，其中包含对应于可选参数 itemType 的条目，如果没有参数，则返回所有类型。回页首HTML5 中属于单独的规范和工作组的技术多项技术已经成熟，脱离了 HTML5 规范，形成自己的文档。还有其他一些，也从 HTML 脱离出来，归类为 “Web 平台”。SVG也许归类到 HTML5 大杂烩中最奇怪的技术就要算 Scalable Vector Graphics (SVG) 了。SVG 是用 XML 定义的矢量图形语法。自从 1999 年起，就由 W3C 开始开发 SVG，因此将它作为 “新” 内容或 HTML5 一部分的一个延伸。但依然值得为重新发掘 SVG 而感到高兴，因为它实际推动了标准。主要浏览器的最新版本都提供或多或少的支持，而有些库，如 Raphael.js 中还有支持旧版本 Internet Explorer 的 API。Web 存储Web Storage 规范定义了一个 API，可对 Web 浏览器的中的键-值进行连续存储。 此规范与 cookies 的功能类似，但有了很大的改进。存储有两种形式：sessionStorage 与 localStorage。每一个都提供了类似的方法来管理条目（setItem()、removeItem() 和 getItem()) 和清除整个存储（clear()）。Session 存储是用来保存当前浏览器会话。Local 存储用来对网站收藏或其他用户数据进行长期存储。还可以监听存储事件，以便监控存储活动并对存储活动作出响应。对于现在就想体验此功能的用户，Persist.js 库提供了完善的跨浏览器解决方案可在所有主要浏览器中使用 Web 存储或等效的功能。还有另外两个规范可与 Web Storage 同时使用：IndexedDB 是一个相关的绿色规范，它提供了更强大的在浏览器中长期存储数据的功能，其中包括查询数据库，更重要是，能够保存复杂对象而不仅是简单的字符串。Web Workers 是功能超强的规范，它定义了能在主页运行 javaScript 同时让用户在底层运行脚本的 API。此功能可以让开发人员将时间较长的处理任务卸载到底层进程，从而释放浏览器，可在主要环境中进行持续交互。文件 API此规范提供了操作 Web 应用程序中文件的 API。加上其他一些新兴和成熟技术，如 XMLHttpRequest、拖放和 Web Workers，File API 能够提供比目前可用技术更强大的 Web 和桌面交互功能。 与简单文件上传输入元素将文件传递给 Web 服务器进行处理或复杂的 Flash 界面不同的是，File API 允许直接访问浏览器文件数据。WebSocketWebSocket API 可以通过一个 TCP 端口在 Web 浏览器和 Web 服务器之间同时双向通讯。在实现方面，WebSocket 还可以走得更远一些，它支持最新版本 Firefox、Opera、Chrome 和 Apple Safari，但已发现的安全漏洞使得它在 Firefox 和 Opera 中默认禁用。服务器发送的事件此规范定义了一个 API，可以打开一个 HTTP 连接，以 DOM 事件形式接收来自服务器的推送通知。本规范改变了目前在固定时间间隔轮询服务器进行更新的模式，节约了大量不需要的请求和相关的处理器时间和带宽。WebGLWeb-based Graphics Library (WebGL) 增强了JavaScript，它具有在浏览器中创建三维交互图形的功能。WebGL 是 canvas HTML 元素的上下文。此规范与 2011 年 3 月推出 1.0 版，由非营利的 Khronos Group 管理。XMLHttpRequest Level 2XMLHttpRequest Level 2 规范通过一些新特性增强了核心 XMLHttpRequest 对象。其中最有趣的大概就是 Cross-Origin Resource Sharing 了，它一种绕过同源安全策略的安全方式，可以实现 XMLHttpRequest 与第三方服务器交互。目前，XMLHttpRequest 只能与相同协议的服务器通讯。
G. 用html5进行多文件上传的时候是一次性把所有已选择文件传到后台么
html传多个文件对前端来说是一股脑的提交，但是其实主要还是看后台是如版何接收的。后台可权以设置一次性接收的文件数据，文件大小等等。其实就和平时的上传下载是一样的。以下载为例：下载的时候，比如用迅雷下载，你的本机是否可以选择并行下载、逐个下载还可以停止、继续下载。同样的，上传也是一个类似的过程，主要依靠服务器代码进行管理设置。本质上，是两个计算机之间相互传递数据流而已。当然，在默认的时候，服务器是接收多个文件的，比如javaweb中struts2接收文件默认是接收完所有文件然后再操作的。
H. 如何html5分割上传实现超大文件无插件网页上传
//代码不支持IE因为IE对HTML5支持不好$("#file").change(function(event){varfile=$("#file")[0].files[0];PostFile(file,0);});functionPostFile(file,i){varname=file.name,//文件名size=file.size,//总大小shardSize=2*1024*1024,shardSize=2*1024*1024,//以2MB为一个分片shardCount=Math.ceil(size/shardSize);//总片数if(i>=shardCount){return;}//计算每一片的起始与结束位置varstart=i*shardSize,end=Math.min(size,start+shardSize);//构造一个表单，FormData是HTML5新增的varform=newFormData();form.append("data",file.slice(start,end));//slice方法用于切出文件的一部分form.append("lastModified",file.lastModified);//slice方法用于切出文件的一部分form.append("name",name);form.append("total",shardCount);//总片数form.append("index",i+1);//当前是第几片//Ajax提交$.ajax({url:"/test/AjaxFile",type:"POST",data:form,async:true,//异步processData:false,//很重要，告诉jquery不要对form进行处理contentType:false,//很重要，指定为false才能形成正确的Content-Typesuccess:function(data){if(data){i=data++;varnum=Math.ceil(i*100/shardCount);$("#output").text(num+'%');PostFile(file,i);}}});}
I. 怎样用html5实现拖拽上传文件
，首先要判断拖入的文件是否符合要求，包括图片类型、大小等，然后获取本地图片信息，实现预览，最后上传。$(function(){ …接上部分 var box = document.getElementById('drop_area'); //拖拽区域 box.addEventListener("drop",function(e){ e.preventDefault(); //取消默认浏览器拖拽效果 var fileList = e.dataTransfer.files; //获取文件对象 //检测是否是拖拽文件到页面的操作 if(fileList.length == 0){ return false; } //检测文件是不是图片 if(fileList[0].type.indexOf('image') === -1){ alert("您拖的不是图片！"); return false; } //拖拉图片到浏览器，可以实现预览功能 var img = window.webkitURL.createObjectURL(fileList[0]); var filename = fileList[0].name; //图片名称 var filesize = Math.floor((fileList[0].size)/1024); if(filesize>500){ alert("上传大小不能超过500K."); return false; } var str = "<img src='"+img+"'><p>图片名称："+filename+"</p><p>大小："+filesize+"KB</p>"; $("#preview").html(str); //上传 xhr = new XMLHttpRequest(); xhr.open("post", "upload.php", true); xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); var fd = new FormData(); fd.append('mypic', fileList[0]); xhr.send(fd); },false); });
J. 如何在手机浏览器中运用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 6Chrome 6Safari 5.02IE 9 Beta and Opera 10.62 不支持这一特性简单的示例下面是一个完整的Html页面包含了实现文件上传并带有进度提示的JavaScript代码，只是实现了基本的功能，感兴趣的可以自己做扩展。 需要吧上传接口修改成自己服务的。 ?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 <!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>
