流式上传文件到服务器磁盘,通过HTTP将数据从浏览器流式传输到服务器的方法...
rhashimoto..
6
我不知道如何使用纯HTML5 API来执行此操作,但是一种可能的解决方法是将Chrome应用程序用作后台服务,以向网页提供其他功能。如果您已经愿意使用开发浏览器并启用实验性功能,那么这似乎只是一个进一步的步骤。
Chrome Apps可以调用chrome.sockets.tcpAPI,您可以在该API上实现所需的任何协议,包括HTTP和HTTPS。这将提供实现流的灵活性。
常规网页可以使用chrome.runtimeAPI 与应用程序交换消息,只要该应用程序声明此用法即可。这将允许您的网页对应用程序进行异步调用。
我写了这个简单的应用程序作为概念证明:
manifest.json
{
"manifest_version" : 2,
"name" : "Streaming Upload Test",
"version" : "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"externally_connectable": {
"matches": ["*://localhost/*"]
},
"sockets": {
"tcp": {
"connect": "*:*"
}
},
"permissions": [
]
}
background.js
var mapSocketToPort = {};
chrome.sockets.tcp.onReceive.addListener(function(info) {
var port = mapSocketToPort[info.socketId];
port.postMessage(new TextDecoder('utf-8').decode(info.data));
});
chrome.sockets.tcp.onReceiveError.addListener(function(info) {
chrome.sockets.tcp.close(info.socketId);
var port = mapSocketToPort[info.socketId];
port.postMessage();
port.disconnect();
delete mapSocketToPort[info.socketId];
});
// Promisify socket API for easier operation sequencing.
// TODO: Check for error and reject.
function socketCreate() {
return new Promise(function(resolve, reject) {
chrome.sockets.tcp.create({ persistent: true }, resolve);
});
}
function socketConnect(s, host, port) {
return new Promise(function(resolve, reject) {
chrome.sockets.tcp.connect(s, host, port, resolve);
});
}
function socketSend(s, data) {
return new Promise(function(resolve, reject) {
chrome.sockets.tcp.send(s, data, resolve);
});
}
chrome.runtime.onConnectExternal.addListener(function(port) {
port.onMessage.addListener(function(msg) {
if (!port.state) {
port.state = msg;
port.chain = socketCreate().then(function(info) {
port.socket = info.socketId;
mapSocketToPort[port.socket] = port;
return socketConnect(port.socket, 'httpbin.org', 80);
}).then(function() {
// TODO: Layer TLS if needed.
}).then(function() {
// TODO: Build headers from the request.
// TODO: Use Transfer-Encoding: chunked.
var headers =
'PUT /put HTTP/1.0\r\n' +
'Host: httpbin.org\r\n' +
'Content-Length: 17\r\n' +
'\r\n';
return socketSend(port.socket, new TextEncoder('utf-8').encode(headers).buffer);
});
}
else {
if (msg) {
port.chain = port.chain.then(function() {
// TODO: Use chunked encoding.
return socketSend(port.socket, new TextEncoder('utf-8').encode(msg).buffer);
});
}
}
});
});
该应用程序没有用户界面。它侦听连接,并向发出硬编码的PUT请求http://httpbin.org/put(httpbin是一个有用的测试站点,但请注意,它不支持分块编码)。PUT数据(当前硬编码为17个八位位组)从客户端流式传输(使用所需的消息数量少或多)并发送到服务器。来自服务器的响应被流回客户端。
这仅仅是概念的证明。真正的应用程序可能应该:
连接到任何主机和端口。
使用传输编码:分块。
向流数据结束发出信号。
处理套接字错误。
支持TLS(例如,使用Forge)
这是一个示例网页,使用该应用程序作为服务执行流式上传(17个八位字节)(请注意,您必须配置自己的应用程序ID):
var MY_CHROME_APP_ID = 'omlafihmmjpklmnlcfkghehxcomggohk';
function streamingUpload(url, options) {
// Open a connection to the Chrome App. The argument must be the
var port = chrome.runtime.connect(MY_CHROME_APP_ID);
port.onMessage.addListener(function(msg) {
if (msg)
document.getElementById("result").textContent += msg;
else
port.disconnect();
});
// Send arguments (must be JSON-serializable).
port.postMessage({
url: url,
options: options
});
// Return a function to call with body data.
return function(data) {
port.postMessage(data);
};
}
// Start an upload.
var f = streamingUpload('https://httpbin.org/put', { method: 'PUT' });
// Stream data a character at a time.
'how now brown cow'.split('').forEach(f);
当我在安装了应用程序的Chrome浏览器中加载此网页时,httpbin返回:
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 19 Jun 2016 16:54:23 GMT
Content-Type: application/json
Content-Length: 240
Connection: close
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
{
"args": {},
"data": "how now brown cow",
"files": {},
"form": {},
"headers": {
"Content-Length": "17",
"Host": "httpbin.org"
},
"json": null,
"origin": "[redacted]",
"url": "http://httpbin.org/put"
}
流式上传文件到服务器磁盘,通过HTTP将数据从浏览器流式传输到服务器的方法...相关推荐
- .net ajax式上传文件
今天在这里介绍一下ajax上传文件.其实也不算是真的使用xmlhttprequest上传,只是使用了iframe实现了无刷新上传而已,最多也只算是仿ajax上传文件.然而网上关于使用xmlhttpre ...
- ANDROID以流形式上传文件
转自CarrotRol博客园博客 import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutpu ...
- 流式上传文件到服务器磁盘,在ASP.NET中流式传输大文件上传
您可以以完全自定义的方式处理上传,而无需使用缓冲 HttpRequest.GetBufferlessInputStream方法.基本上,您可以访问原始的传入数据,并随意随意使用它. 我刚刚创建了一个将 ...
- axios 上传文件 封装_axios 封装【满足常规数据上传及file上传】
axios 封装[满足常规数据上传及file上传] request.js /* 封装axios */ const axios = require('axios'); import { featchAp ...
- 上传文件,压缩临时图片,不做本地图片存储,用于传输
前端上传的MultipartFile file//创建临时文件 OutputStream stream = null; File toFile = null; try {toFile = File.c ...
- Hadoop hdfs 使用流来上传文件代码示例
- php curl上传文件到solr,9.Solr4.10.3数据导入(post.jar方式和curl方式)
1.使用post.jar方式 java -Durl=http://192.168.137.168:8080/solr/mycore/update -Ddata=files -jar /usr/loca ...
- 服务器上的文件夹设置ftp,设置ftp服务器上传文件夹
设置ftp服务器上传文件夹 内容精选 换一换 监控数据上报功能可以将系统中采集到的监控数据写入到文本文件,并以FTP或SFTP的形式上传到指定的服务器中.使用该功能前,管理员需要在FusionInsi ...
- ftp服务器上传文件权限设置,ftp服务器 上传文件权限设置
ftp服务器 上传文件权限设置 内容精选 换一换 华为云对象存储服务帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用对 ...
- Java获取流形式上传下载文件
废话不多说,直接上代码: 1:pom中添加一下依赖: <!--druid数据源--><dependency><groupId>com.alibaba</gro ...
最新文章
- 《父亲家书》选:给初为人师的儿子
- 使用浏览器cookie
- xcode8 升级后注释快捷键不能使用的解决方法
- 高晓松谈管理:自嘲总被员工管
- gateway动态路由_微服务与网关技术(SIA-GateWay)
- 【高并发】掌握JUC中的阻塞队列
- Js中动态追加代码后,之前定义的Js不再起作用
- 在Unity3D中实现安卓平台的本地通知推送
- 女程序员做了个梦,众网友的神回复
- unity使用屏幕后处理实现闪烁特效,创建新的shader文件过程
- kettle连接ACCESS数据库
- (译)《科学美国人》:多样的人际网络导致繁荣的本地经济
- 实现浏览器多标签页通信
- 爱创课堂每日一题-Javascript垃圾回收方法?
- 红米5plus刷android one,手机知识:红米5plus如何 红米5plus配置参数
- 红轴和茶轴哪个适合游戏 红轴和茶轴哪个手感好
- 关于SQL的一点学习
- 通用型系统架构设计(多图)
- 数据结构-算法题分享1
- 趣味seo-SEO相关的网站优化问题
热门文章
- .rpt 文件怎麽打開?Crystal Reports 打開.rpt失敗 ?
- 烧烤摊如何走O2O之路 微博微信运营案例分享
- INA226+STC89C52RC读取电流电压功率
- Codeforce - 1040B - Shashlik Cooking(水题)
- mysql数据驱动问题hour_day_of 0 ->1
- 【1】EFR32配置433Mhz(可通信CC1101)——EFR32 项目例程打开和烧录
- 【SAP Abap】SE91 - SAP MESSAGE 消息类创建与应用
- GAMES101-现代计算机图形学入门-闫令琪——Lecture 06 Rasterization 2 (Antialiasing and Z-Buffering) 学习笔记
- 关于公众号运营推广圈粉心得
- ACM Plan UVa - 10102 The path in the colored field