很簡單。 var files=document.getElementsByName('picfile').files, fs=files.length, s=0;if(fs 10 ){ alert("上傳的文件數(shù)量超過10個了！請重新選擇！"); }else{ for(var i=0;i 1024*1024){ alert('"'+files[i].name + "這個文件大于1M
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)洮北免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了近1000家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
html5 本地存儲有五種方案。
1、LocalStorage
LocalStorage就是Key-Value的簡單鍵值對存儲結(jié)構(gòu)，Web Storage除了localStorage的持久性存儲外，還有針對本次回話的sessionStorage方式，一般情況下localStorage較為常用，示例代碼如下：
function save(dataModel){
var value = dataModel.serialize();
window.localStorage['DataModel'] = value;
window.localStorage['DataCount'] = dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
function restore(dataModel){
var value = window.localStorage['DataModel'];
if(value){
dataModel.deserialize(value);
console.log(window.localStorage['DataCount'] + ' datas are restored');
return value;
}
return '';
}
function clear(){
if(window.localStorage['DataModel']){
console.log(window.localStorage['DataCount'] + ' datas are cleared');
delete window.localStorage['DataModel'];
delete window.localStorage['DataCount'];
}
}
2、Cookie
這種存儲方式存儲內(nèi)容很有限，只適合做簡單信息存儲，存取接口設(shè)計得極其反人類，舉例如下：
function getCookieValue(name) {
if (document.cookie.length 0) {
var start = document.cookie.indexOf(name + "=");
if (start !== -1) {
start = start + name.length + 1;
var end = document.cookie.indexOf(";", start);
if (end === -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return '';
}
function save(dataModel) {
var value = dataModel.serialize();
document.cookie = 'DataModel=' + escape(value);
document.cookie = 'DataCount=' + dataModel.size();
console.log(dataModel.size() + ' datas are saved');
return value;
}
3、Indexed Database API
IndexedDB可以存儲結(jié)構(gòu)對象，可構(gòu)建key和index的索引方式查找，目前各瀏覽器的已經(jīng)逐漸支持IndexedDB的存儲方式，其使用代碼如下，需注意IndexedDB的很多操作接口類似NodeJS的異步回調(diào)方式，特別是查詢時連cursor的continue都是異步再次回調(diào)onsuccess函數(shù)的操作方式，因此和NodeJS一樣使用上不如同步的代碼容易。
function save(dataModel){
var tx = db.transaction("meters", "readwrite");
var store = tx.objectStore("meters");
dataModel.each(function(data){
store.put({
id: data.getId(),
tag: data.getTag(),
name: data.getName(),
meterValue: data.a('meter.value'),
meterAngle: data.a('meter.angle'),
p3: data.p3(),
r3: data.r3(),
s3: data.s3()
});
});
tx.oncomplete = function() {
console.log(dataModel.size() + ' datas are saved');
};
return dataModel.serialize();
}
4、FileSystem API
FileSystem API相當(dāng)于操作本地文件的存儲方式，目前支持瀏覽器不多，其接口標(biāo)準(zhǔn)也在發(fā)展制定變化中，因此也可以動態(tài)生成圖片到本地文件，然后通過 filesystem:http:*** 的URL方式直接賦值給img的html元素的src訪問。
function save(dataModel) {
var value = dataModel.serialize();
fs.root.getFile('meters.txt', {create: true}, function (fileEntry) {
console.log(fileEntry.toURL());
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function () {
console.log(dataModel.size() + ' datas are saved');
};
var blob = new Blob([value], {type: 'text/plain'});
fileWriter.write(blob);
});
});
return value;
}
5、Application Cache
window.applicationCache 對象是對瀏覽器的應(yīng)用緩存的編程訪問方式。其 status 屬性可用于查看緩存的當(dāng)前狀態(tài)：
var appCache = window.applicationCache;
switch (appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
return 'UNCACHED';
break;
case appCache.IDLE: // IDLE == 1
return 'IDLE';
break;
case appCache.CHECKING: // CHECKING == 2
return 'CHECKING';
break;
case appCache.DOWNLOADING: // DOWNLOADING == 3
return 'DOWNLOADING';
break;
case appCache.UPDATEREADY: // UPDATEREADY == 4
return 'UPDATEREADY';
break;
case appCache.OBSOLETE: // OBSOLETE == 5
return 'OBSOLETE';
break;
default:
return 'UKNOWN CACHE STATUS';
break;
};
為何會有一個 blob？直接點擊這個鏈接，返回了 404！什么情況？于是對此做了一番探索。
The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here .
首先創(chuàng)建變量名為 video 的 DOM 對象和變量名為 mediaSource 的 MediaSource 對象。通過函數(shù) createObjectURL 來將 DOM::video 對象的屬性 src 和 mediaSource 進行“連接”。接下來，通過注冊事件 Event::sourceopen 來觸發(fā)當(dāng)上述“連接”結(jié)束之后的回調(diào)處理。回調(diào)處理就是需要賦值 視頻數(shù)據(jù) 的地方。 調(diào)用 MediaSource::addSourceBuffer 方法來構(gòu)建一個存放視頻數(shù)據(jù)的 sourceBuffer。 在往 sourceBuffer 中存放數(shù)據(jù)結(jié)束之后會觸發(fā)事件 Event::updateend 。通過注冊這個事件的回調(diào)，可以知曉數(shù)據(jù)已經(jīng)加載完畢，然后關(guān)閉數(shù)據(jù)流，調(diào)用 Video::play 函數(shù)通知瀏覽器播放視頻。至此，整個 Blob 運行機制講解完畢。
W3C 上有明確關(guān)于 MediaSource 擴展接口的文檔。擴展文檔中是這么定義的， 它允許 JS 腳本動態(tài)構(gòu)建媒體流和允許 JS 傳送媒體塊到 H5 媒體元素。這種接口的應(yīng)用可以讓 H5 播放器實現(xiàn)持續(xù)添加數(shù)據(jù)進行播放。
綜上，這個只是 HTML5 提供的新特性，但是截止目前還是處于試驗狀態(tài)。
在上面示例中使用的視頻格式不是普通的 MP4 而是 FMP4 。如果沒有注意到這個問題，就可能造成：
HTML5 MediaSource works with some mp4 files and not with others (same codecs)。
解決方案：
It works fine if mp4 is fragmented.
You can do that using Bento4's mp4fragment tool.
這個暫時解釋不了。你知道blob是怎么生成出來的就知道為什么我會這么說了。
有人拿到b站的地址也是在中間生成blob的過程里，而不是生成blob后，去反向算出來。
這個真實地址都是在js里面。
重慶分公司
重慶分公司
