大文件上传html5,大文件上传下载方案

html5超大文件上传如何实现？

后端code

创新互联公司专业为企业提供平房网站建设、平房做网站、平房网站设计、平房网站制作等企业网站建设、网页设计与制作、平房企业网站模板建站服务，10年平房做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

?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();

}

如何html5分割上传实现超大文件无插件网页上传

//代码不支持IE 因为IE对HTML5支持不好$("#file").change(function(event) { var file = $("#file")[0].files[0]; PostFile(file,0); });function PostFile(file,i){ var name = file.name, //文件名 size = file.size, //总大小shardSize = 2 * 1024 * 1024, shardSize = 2 * 1024 * 1024,//以2MB为一个分片 shardCount = Math.ceil(size / shardSize); //总片数 if(i = shardCount){ return; } //计算每一片的起始与结束位置 var start = i * shardSize, end = Math.min(size, start + shardSize); //构造一个表单，FormData是HTML5新增的 var form = new FormData(); 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-Type success: function(data){ if(data){ i = data++; var num = Math.ceil(i*100 / shardCount); $("#output").text(num+'%'); PostFile(file,i); } } }); }

如何在手机浏览器中运用HTML5的文件API实现上传多图功能

Html5终于解决了上传文件的同时显示文件上传进度的老问题。现在大部分的网站用Flash去实现这一功能，还有一些网站继续采用Html formwith 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代码，只是实现了基本的功能，感兴趣的可以自己做扩展。需要吧上传接口修改成自己服务的。

!DOCTYPE html

html

head

titleUpload 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/labelbr /

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

前端上传大型文件或超长数据的解决办法

我们设计的上传文件大约在500m左右

我第一反应是blob，在HTML5中添加了blob类型用来定义前端较大数据，之前使用过blob流传输视频再使用html5中video标签读取blob流，所以blob可以作为这种文件传输的载体，那如何提交呢，使用可formdata提交blob数据，这种方式可以承受较大数据量的文件，但在使用formdata传输的过程中，浏览器会卡死，无法操作。

还是舍友提醒，可采用数据分割的方式，一部分一部分上传。后经百度得知，文件分割要防止数据丢失进行大小校验，以及防止外部入侵，进行分段前端加密，后端校验。

百度发布了一款分割上传的组件web upload，可包含文件分割，大小校验等功能。

网站为：

佩服我们大学宿舍的技术氛围，出差回来的火车上跟大学舍友在微信上聊了两三个小时的技术，，，那天刚好是大学生开学那几天，路上好多大学生，好怀念自己的大学生活，好怀念与大学舍友谈天说地或技术探讨到深夜的日子

说了几个前端的问题，总结记录一下吧

其中只有一个我会的，，，先说这个问题，其他的我学习完再分享，留坑。。。。。。

关于HTML5 的播放大体积视频文件的问题

播放大视频文件等待下载时间过长的缺陷，本身就不是HTML5的问题，服务器问题和视频格式问题。

Flash插件播放fla的传统方式上：这个现在YOUKU基本上FLV格式。建议在服务器上装流媒体服务，然后用HTML5点播地址，不要直接HTML5读取视频地址，没人会这样做除非只是非常小，非常短的的视频文件。