HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)
说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中。
1.简单分段读取文件为Blob,ajax上传到服务器
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">分段读取文件:</div>
<div class="panel-body">
<input type="file" id="file" />
<blockquote style="word-break:break-all;"></blockquote>
</div>
</div>
</div>
JS:
/*
* 分段读取文件为blob ,并使用ajax上传到服务器
* 分段上传exe文件会抛出异常
*/
var fileBox = document.getElementById('file');
file.onchange = function () {
//获取文件对象
var file = this.files[0];
var reader = new FileReader();
var step = 1024 * 1024;
var total = file.size;
var cuLoaded = 0;
console.info("文件大小:" + file.size);
var startTime = new Date();
//读取一段成功
reader.onload = function (e) {
//处理读取的结果
var loaded = e.loaded;
//将分段数据上传到服务器
uploadFile(reader.result, cuLoaded, function () {
console.info('loaded:' + cuLoaded + 'current:' + loaded);
//如果没有读完,继续
cuLoaded += loaded;
if (cuLoaded < total) {
readBlob(cuLoaded);
} else {
console.log('总共用时:' + (new Date().getTime() - startTime.getTime()) / 1000);
cuLoaded = total;
}
});
}
//指定开始位置,分块读取文件
function readBlob(start) {
//指定开始位置和结束位置读取文件
//console.info('start:' + start);
var blob = file.slice(start, start + step);
reader.readAsArrayBuffer(blob);
}
//开始读取
readBlob(0);
//关键代码上传到服务器
function uploadFile(result, startIndex, onSuccess) {
var blob = new Blob([result]);
//提交到服务器
var fd = new FormData();
fd.append('file', blob);
fd.append('filename', file.name);
fd.append('loaded', startIndex);
var xhr = new XMLHttpRequest();
xhr.open('post', '../ashx/upload2.ashx', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// var data = eval('(' + xhr.responseText + ')');
console.info(xhr.responseText);
if (onSuccess)
onSuccess();
}
}
//开始发送
xhr.send(fd);
}
}
后台代码:
/// <summary>
/// upload2 的摘要说明
/// </summary>
public class upload2 : IHttpHandler
{
LogHelper.LogHelper _log = new LogHelper.LogHelper();
int totalCount = ;
public void ProcessRequest(HttpContext context)
{
HttpContext _Context = context;
//接收文件
HttpRequest req = _Context.Request;
if (req.Files.Count <= )
{
WriteStr("获取服务器上传文件失败");
return;
}
HttpPostedFile _file = req.Files[];
//获取参数
// string ext = req.Form["extention"];
string filename = req.Form["filename"];
//如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G
int loaded = Convert.ToInt32(req.Form["loaded"]);
totalCount += loaded; string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\";
newname += filename;
//接收二级制数据并保存
Stream stream = _file.InputStream;
if (stream.Length <= )
throw new Exception("接收的数据不能为空");
byte[] dataOne = new byte[stream.Length];
stream.Read(dataOne, , dataOne.Length);
FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024);
try
{
fs.Write(dataOne, , dataOne.Length);
}
finally
{
fs.Close();
stream.Close();
}
_log.WriteLine((totalCount + dataOne.Length).ToString());
WriteStr("分段数据保存成功");
}
private void WriteStr(string str)
{
HttpContext.Current.Response.Write(str);
}
public bool IsReusable
{
get
{
return true;
}
}
2.分段读取文件为blob ,并使用ajax上传到服务器,追加中止、继续功能操作
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">分段读取文件:</div>
<div class="panel-body">
<input type="file" id="file" />
<br />
<input type="button" value="中止" onclick="stop();" /> 
<input type="button" value="继续" onclick="containue();" />
<br />
<progress id="progressOne" max="100" value="0" style="width:400px;"></progress>
<blockquote id="Status" style="word-break:break-all;"></blockquote>
</div>
</div>
</div>
JS:
/*
* 分段读取文件为blob ,并使用ajax上传到服务器
* 使用Ajax方式提交上传数据文件大小应该有限值,最好500MB以内
* 原因短时间过多的ajax请求,Asp.Net后台会崩溃获取上传的分块数据为空
* 取代方式,长连接或WebSocket
*/
var fileBox = document.getElementById('file');
var reader = null; //读取操作对象
var step = 1024 * 1024 * 3.5; //每次读取文件大小
var cuLoaded = 0; //当前已经读取总数
var file = null; //当前读取的文件对象
var enableRead = true;//标识是否可以读取文件
fileBox.onchange = function () {
//获取文件对象
file = this.files[0];
var total = file.size;
console.info("文件大小:" + file.size);
var startTime = new Date();
reader = new FileReader();
//读取一段成功
reader.onload = function (e) {
//处理读取的结果
var result = reader.result;
var loaded = e.loaded;
if (enableRead == false)
return false;
//将分段数据上传到服务器
uploadFile(result, cuLoaded, function () {
console.info('loaded:' + cuLoaded + '----current:' + loaded);
//如果没有读完,继续
cuLoaded += loaded;
if (cuLoaded < total) {
readBlob(cuLoaded);
} else {
console.log('总共用时:' + (new Date().getTime() - startTime.getTime()) / 1000);
cuLoaded = total;
}
//显示结果进度
var percent = (cuLoaded / total) * 100;
document.getElementById('Status').innerText = percent;
document.getElementById('progressOne').value = percent;
});
}
//开始读取
readBlob(0);
//关键代码上传到服务器
function uploadFile(result, startIndex, onSuccess) {
var blob = new Blob([result]);
//提交到服务器
var fd = new FormData();
fd.append('file', blob);
fd.append('filename', file.name);
fd.append('loaded', startIndex);
var xhr = new XMLHttpRequest();
xhr.open('post', '../ashx/upload2.ashx', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (onSuccess)
onSuccess();
} else if (xhr.status == 500) {
//console.info('请求出错,' + xhr.responseText);
setTimeout(function () {
containue();
}, 1000);
}
}
//开始发送
xhr.send(fd);
}
}
//指定开始位置,分块读取文件
function readBlob(start) {
//指定开始位置和结束位置读取文件
var blob = file.slice(start, start + step);
reader.readAsArrayBuffer(blob);
}
//中止
function stop() {
//中止读取操作
console.info('中止,cuLoaded:' + cuLoaded);
enableRead = false;
reader.abort();
}
//继续
function containue() {
console.info('继续,cuLoaded:' + cuLoaded);
enableRead = true;
readBlob(cuLoaded);
}
后台代码同上
3.分段读取文件为二进制数组 ,并使用ajax上传到服务器
使用二进制数组传递的方式,效率特别低,最终文件还与原始大小有些偏差
HTML内容同上
JS:
/*
* 分段读取文件为二进制数组 ,并使用ajax上传到服务器
* 使用二进制数组传递的方式,效率特别低,最终文件还与原始大小有些偏差
*/
var fileBox = document.getElementById('file');
var reader = new FileReader(); //读取操作对象
var step = 1024 * 1024; //每次读取文件大小
var cuLoaded = 0; //当前已经读取总数
var file = null; //当前读取的文件对象
var enableRead = true;//标识是否可以读取文件
fileBox.onchange = function () {
//获取文件对象
if (file == null) //如果赋值多次会有丢失数据的可能
file = this.files[0];
var total = file.size;
console.info("文件大小:" + file.size);
var startTime = new Date();
//读取一段成功
reader.onload = function (e) {
//处理读取的结果
var result = reader.result;
var loaded = e.loaded;
if (enableRead == false)
return false;
//将分段数据上传到服务器
uploadFile(result, cuLoaded, function () {
console.info('loaded:' + cuLoaded + '----current:' + loaded);
//如果没有读完,继续
cuLoaded += loaded;
if (cuLoaded < total) {
readBlob(cuLoaded);
} else {
console.log('总共用时:' + (new Date().getTime() - startTime.getTime()) / 1000);
cuLoaded = total;
}
//显示结果进度
var percent = (cuLoaded / total) * 100;
document.getElementById('Status').innerText = percent;
document.getElementById('progressOne').value = percent;
});
}
//开始读取
readBlob(0);
//关键代码上传到服务器
function uploadFile(result, startIndex, onSuccess) {
var array = new Int8Array(result);
console.info(array.byteLength);
//提交到服务器
var fd = new FormData();
fd.append('file', array);
fd.append('filename', file.name);
fd.append('loaded', startIndex);
var xhr = new XMLHttpRequest();
xhr.open('post', '../ashx/upload3.ashx', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
// console.info(xhr.responseText);
if (onSuccess)
onSuccess();
} else if (xhr.status == 500) {
console.info('服务器出错');
reader.abort();
}
}
//开始发送
xhr.send(fd);
}
}
//指定开始位置,分块读取文件
function readBlob(start) {
//指定开始位置和结束位置读取文件
var blob = file.slice(start, start + step);
reader.readAsArrayBuffer(blob);
}
//中止
function stop() {
//中止读取操作
console.info('中止,cuLoaded:' + cuLoaded);
enableRead = false;
reader.abort();
}
//继续
function containue() {
console.info('继续,cuLoaded:' + cuLoaded);
enableRead = true;
readBlob(cuLoaded);
}
后台代码:
/// <summary>
/// upload3 的摘要说明
/// </summary>
public class upload3 : IHttpHandler
{
LogHelper.LogHelper _log = new LogHelper.LogHelper();
int totalCount = ;
public void ProcessRequest(HttpContext context)
{
HttpContext _Context = context;
//接收文件
HttpRequest req = _Context.Request;
string data = req.Form["file"];
//转换方式一
//int[] intData = data.Split(',').Select(q => Convert.ToInt32(q)).ToArray();
//byte[] dataArray = intData.ToList().ConvertAll(x=>(byte)x).ToArray();
//转换方式二
byte[] dataArray = data.Split(',').Select(q => int.Parse(q)).Select(q => (byte)q).ToArray();
//获取参数
string filename = req.Form["filename"];
//如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G
int loaded = Convert.ToInt32(req.Form["loaded"]);
totalCount += loaded;
string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\";
newname += filename;
try
{
// 接收二级制数据并保存
byte[] dataOne = dataArray;
FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, );
try
{
fs.Write(dataOne, , dataOne.Length);
}
finally
{
fs.Close();
}
_log.WriteLine((totalCount + dataOne.Length).ToString());
WriteStr("分段数据保存成功");
}
catch (Exception ex)
{
throw ex;
}
}
private void WriteStr(string str)
{
HttpContext.Current.Response.Write(str);
}
public bool IsReusable
{
get
{
return false;
}
}
}
分段读取文件(四):http://www.cnblogs.com/tianma3798/p/5839869.html
读取文件三:http://www.cnblogs.com/tianma3798/p/5839810.html
HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)的更多相关文章
- HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket
一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...
- HTML5 文件域+FileReader 分段读取文件并上传(七)-WebSocket
一.单文件上传实例 HTML: <div class="container"> <div class="panel panel-default" ...
- HTML5 文件域+FileReader 分段读取文件(五)
一.默认FileReader会分段读取File对象,这是分段大小不一定,并且一般会很大 HTML: <div class="container"> <!--文本文 ...
- HTML5 文件域+FileReader 分段读取文件(四)
一.分段读取txt文本 HTML: <div class="container"> <div class="panel panel-default&qu ...
- html5中利用FileReader来读取文件。
利用FileReader来读取文件的能够来实现即时预览的效果,这个也是在html5中才有的功能. <!DOCTYPE html> <html lang="en"& ...
- 使用 html5 FileReader 获取图片, 并异步上传到服务器 (不使用 iframe)
为什么80%的码农都做不了架构师?>>> 原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码post到服务器. 3.根据 ...
- js中将文件的base64转换成file并上传到服务器
** * @param base64Codes * 图片的base64编码 */ function sumitImageFile(base64Codes){ var form=document.for ...
- uboot下读取flash,上传tftp服务器、下载
上传 setenv gatewayip 192.168.1.1; setenv serverip 192.168.1.7; setenv ipaddr 192.168.1.156 ; mw.b 0x8 ...
- java文件上传到服务器
最近项目中使用到了文件从本地到服务器的功能.其实是为了解决目前浏览器不支持获取本地文件全路径.不得已而想到上传到服务器的固定目录,从而方便项目获取文件,进而使程序支持EXCEL批量导入数据. 在前台界 ...
随机推荐
- 改善 ASP.NET MVC 代码库的 5 点建议
MVC,建议 刚刚检查完支持工单中的一些代码,笔者想针对 ASP.NET MVC 应用的改进写一些建议.这些内容仍在笔者脑海中,愿与各位一同分享.若你已使用 MVC 一段时间,那么以下内容可能并不新鲜 ...
- 查看SQLServer各种缓存的情况
查看页面缓存: SELECT * FROM sys.dm_os_buffer_descriptors 清除页面缓存: CHECKPOINTDBCC DROPCLEANBUFFERS 查看执行计划缓存: ...
- Spring整合CXF,发布RSETful 风格WebService
原文地址:http://www.cnblogs.com/hoojo/archive/2012/07/23/2605219.html 这篇文章是承接之前CXF整合Spring的这个项目示例的延伸,所以有 ...
- 使用lombok
Lombok是一种JavaArchive(JAR)文件,可用来消除Java代码的冗长.通过在开发环境中实现Lombok,开发人 员可以节省构建诸如hashCode()和equals()这样的方法以及以 ...
- oracle索引再论
ORACLE中索引的数据结构有B树结构和位图结构. 我们通常用的普通索引.反向键索引.函数索引等都是B树结构的,是树状结构:位图结构则只有叶子节点. B树索引操作有唯一性扫描,范围扫描,快速索引全扫描 ...
- iconv
iconv -f 源字符集 -t 目标字符集 文件名 iconv -f UTF-8 -t GBK success.msg [root@perass ~]# cat success.msg | t ...
- eclipse配置j2ee项目
1.下载jdk (1.5,1.6) 安装 从sun的官方网站下载,我下的是jdk-1_5_0_19-nb-6_5_1-windows-ml.exe,集成netbean的版本,下载后一路默认安装. 配置 ...
- [转载]JQuery.closest(),parent(),parents()寻找父节点
1.通过item-1查找 level-3(查找直接上级) $('li.item-1').closest('ul') $('li.item-1').parent() $('li.item-1').par ...
- centos 6安装报错
Missing ISO image The installer has tried to . but cannot find it on the hard drive. Please copy thi ...
- c#语言基础编程—string
引言 在c#中经常会有相关的string的操作,string类型为引用类型,集成于Object,所以会有四个方法.详情可见 值类型和引用类型的区别 里面详细介绍了,值类型和引用类型的区别和应用场合,所 ...