blobhtml5,html blob
html5下讲一个很大的二进制文件怎么传入blob的第一个参数
很简单。 var files=document.getElementsByName('picfile').files, fs=files.length, s=0;if(fs 10 ){ alert("上传的文件数量超过10个了!请重新选择!"); }else{ for(var i=0;i 1024*1024){ alert('"'+files[i].name + "这个文件大于1M
成都创新互联网站建设提供从项目策划、软件开发,软件安全维护、网站优化(SEO)、网站分析、效果评估等整套的建站服务,主营业务为网站设计、成都网站建设,重庆App定制开发以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。成都创新互联深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
前端上传大型文件或超长数据的解决办法
我们设计的上传文件大约在500m左右
我第一反应是blob,在HTML5中添加了blob类型用来定义前端较大数据,之前使用过blob流传输视频再使用html5中video标签读取blob流,所以blob可以作为这种文件传输的载体,那如何提交呢,使用可formdata提交blob数据,这种方式可以承受较大数据量的文件,但在使用formdata传输的过程中,浏览器会卡死,无法操作。
还是舍友提醒,可采用数据分割的方式,一部分一部分上传。后经百度得知,文件分割要防止数据丢失进行大小校验,以及防止外部入侵,进行分段前端加密,后端校验。
百度发布了一款分割上传的组件web upload,可包含文件分割,大小校验等功能。
网站为:
佩服我们大学宿舍的技术氛围,出差回来的火车上跟大学舍友在微信上聊了两三个小时的技术,,,那天刚好是大学生开学那几天,路上好多大学生,好怀念自己的大学生活,好怀念与大学舍友谈天说地或技术探讨到深夜的日子
说了几个前端的问题,总结记录一下吧
其中只有一个我会的,,,先说这个问题,其他的我学习完再分享,留坑。。。。。。
html5 本地存储有多少种方案
html5 本地存储有五种方案。
1、LocalStorage
LocalStorage就是Key-Value的简单键值对存储结构,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
这种存储方式存储内容很有限,只适合做简单信息存储,存取接口设计得极其反人类,举例如下:
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可以存储结构对象,可构建key和index的索引方式查找,目前各浏览器的已经逐渐支持IndexedDB的存储方式,其使用代码如下,需注意IndexedDB的很多操作接口类似NodeJS的异步回调方式,特别是查询时连cursor的continue都是异步再次回调onsuccess函数的操作方式,因此和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相当于操作本地文件的存储方式,目前支持浏览器不多,其接口标准也在发展制定变化中,因此也可以动态生成图片到本地文件,然后通过 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 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态:
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;
};
如何解析HTml5-video标签已blob:开头的地址?
这个暂时解释不了。你知道blob是怎么生成出来的就知道为什么我会这么说了。
有人拿到b站的地址也是在中间生成blob的过程里,而不是生成blob后,去反向算出来。
这个真实地址都是在js里面。
初识 HTML5 Video Blob
为何会有一个 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 .
首先创建变量名为 video 的 DOM 对象和变量名为 mediaSource 的 MediaSource 对象。通过函数 createObjectURL 来将 DOM::video 对象的属性 src 和 mediaSource 进行“连接”。接下来,通过注册事件 Event::sourceopen 来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视频数据的 sourceBuffer。 在往 sourceBuffer 中存放数据结束之后会触发事件 Event::updateend 。通过注册这个事件的回调,可以知晓数据已经加载完毕,然后关闭数据流,调用 Video::play 函数通知浏览器播放视频。至此,整个 Blob 运行机制讲解完毕。
W3C 上有明确关于 MediaSource 扩展接口的文档。扩展文档中是这么定义的, 它允许 JS 脚本动态构建媒体流和允许 JS 传送媒体块到 H5 媒体元素。这种接口的应用可以让 H5 播放器实现持续添加数据进行播放。
综上,这个只是 HTML5 提供的新特性,但是截止目前还是处于试验状态。
在上面示例中使用的视频格式不是普通的 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.
new blob 参数
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的。MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MINE类型,这相当于对文件的储存,其它很多二进制对象也是从这个对象继承的。 在稍低版本的现代浏览器中,这个Blob对象还没规范化,因此需要BlobBuilder之类的方式来创建。但是现在Blob已经规范到可以直接new它的构造器Blob来创建了,而且浏览器几乎都已经支持了这个方式,所以对于旧标准咱就没必要纠结了。
标题名称:blobhtml5,html blob
文章转载:http://scyanting.com/article/dsscghj.html