html5大文件上傳
⑴ html5+websocket上傳文件問題
websocket目前只支持文本，不支持二進制數據。上傳多個文件，用 <input type="file"> 結合 ajax 的 POST 足夠了
⑵ 關於HTML5 的<vedio>播放大體積視頻文件的問題
播放大視頻文件等待下載時間過長的缺陷，本身就不是HTML5的問題，伺服器問題和視頻格式問題。
Flash插件播放fla的傳統方式上：這個現在YOUKU基本上FLV格式。建議在伺服器上裝流媒體服務，然後用HTML5點播地址，不要直接HTML5讀取視頻地址，沒人會這樣做除非只是非常小，非常短的的視頻文件。
相對於下載後觀看的網路播放形式而言，流媒體的典型特徵是把連續的音頻和視頻信息壓縮後放到網路伺服器上，用戶邊下載邊觀看，而不必等待整個文件下載完畢。由於流媒體技術的優越性，該技術廣泛應用於視頻點播、視頻會議、遠程教育、遠程醫療和在線直播系統中。
相關信息
sewise流媒體伺服器軟體系統是一整套流媒體編碼、分發和存儲的軟體系統，包含直播、點播、虛擬直播、剪切、轉碼、視頻管理系統。這些軟體支持多屏多系統播放，終端客戶使用手機、平板、電腦、電視等終端，ios、安卓、windows、linux等系統，都能支持播放。
點播伺服器軟體：支持mp4、flv、mov、ts、wmv、mkv、rmvb等多種類型的文件上傳；支持2種上傳方式，可上傳大文件；支持H.264/AAC編碼；強大的服務端實時轉碼能力，轉碼輸出3種不同碼率的視頻文件；支持web應用播放需求及android系統、ios系統播放需求。
⑶ 使用dw製作的html5網頁怎麼上傳到微信公眾平台
微信公眾平台本身沒有這個存儲空間，所以就需要有個伺服器或者第三方託管來承載製作好的html5頁面；
1.通常微信都有第三方合作平台，直接調用第三方介面，然後將html5和頁面素材統一打包上傳到第三方服務端。
2.倘若有伺服器空間，則直接將html5打包放在網站根目錄文件下，在微信端直接調用伺服器端的地址即可；
3.可以在微信平台通過文字或鏈接跳轉的形式，實現html5頁面的轉換。
⑷ 前端上傳大型文件或超長數據的解決辦法
我們設計的上傳文件大約在500m左右
我第一反應是blob，在HTML5中添加了blob類型用來定義前端較大數據，之前使用過blob流傳輸視頻再使用html5中<video>標簽讀取blob流，所以blob可以作為這種文件傳輸的載體，那如何提交呢，使用可formdata提交blob數據，這種方式可以承受較大數據量的文件，但在使用formdata傳輸的過程中，瀏覽器會卡死，無法操作。
還是舍友提醒，可採用數據分割的方式，一部分一部分上傳。後經網路得知，文件分割要防止數據丟失進行大小校驗，以及防止外部入侵，進行分段前端加密，後端校驗。
網路發布了一款分割上傳的組件web upload，可包含文件分割，大小校驗等功能。
網站為： http://fex..com/webuploader/getting-started.html
佩服我們大學宿舍的技術氛圍，出差回來的火車上跟大學舍友在微信上聊了兩三個小時的技術，，，那天剛好是大學生開學那幾天，路上好多大學生，好懷念自己的大學生活，好懷念與大學舍友談天說地或技術探討到深夜的日子
說了幾個前端的問題，總結記錄一下吧
其中只有一個我會的，，，先說這個問題，其他的我學習完再分享，留坑。。。。。。
⑸ 用html5進行多文件上傳的時候是一次性把所有已選擇文件傳到後台么
html傳多個文件對前端來說是一股腦的提交，但是其實主要還是看後台是如何接收的。後台可以設置一次性接收的文件數據，文件大小等等。其實就和平時的上傳下載是一樣的。
以下載為例：下載的時候，比如用迅雷下載，你的本機是否可以選擇並行下載、逐個下載還可以停止、繼續下載。同樣的，上傳也是一個類似的過程，主要依靠伺服器代碼進行管理設置。本質上，是兩個計算機之間相互傳遞數據流而已。
當然，在默認的時候，伺服器是接收多個文件的，比如javaweb中struts2接收文件默認是接收完所有文件然後再操作的。
⑹ 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();
}
⑺ 如何使用html5的FileApi上傳大文件
根本不需要那麼麻煩，裝一個擴展就實現了，代碼都不用寫。
AetherUpload-Laravel提供超大文件上傳的Laravel擴展包，支持分組配置、斷線續傳、秒傳等功能，簡單易用，滿足多數人的主流需求，無需編寫適配代碼，幾乎開箱即用。
⑻ html5可以通過路徑上傳文件么
這個當然可以 只需要有合適的插件支持即可
⑼ 怎樣用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);
});
⑽ 如何在手機瀏覽器中運用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>