H5读取文件并上传到服务器的方法
导读：收集整理的这篇文章主要介绍了H5读取文件并上传到服务器的方法，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5读取文件并上传到服务器的方法，H5读取文件并上传到服务器的方法的注意事项有哪些，下面就是实战案例，一起来看一下。...
收集整理的这篇文章主要介绍了H5读取文件并上传到服务器的方法，觉得挺不错的，现在分享给大家，也给大家做个参考。这次给大家带来H5读取文件并上传到服务器的方法，H5读取文件并上传到服务器的方法的注意事项有哪些，下面就是实战案例，一起来看一下。说明：使用Ajax方式上传，文件不能过大，最好小于三四百兆，因为过多的连续Ajax请求会使后台崩溃，获取InputStream中数据会为空，尤其在GOOGLE浏览器测试过程中。
1.简单分段读取文件为Blob，ajax上传到服务器
p class="container">
p class="panel panel-default">
p class="panel-heading">
分段读取文件：/p>
p class="panel-body">
input tyPE="file" id="file" />
blockquote style="word-break:break-all;
">
/blockquote>
/p>
/p>
/p>
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 = 0;
public void ProcessRequest(HttpContext context) {
HttpContext _Context = context;
//接收文件 HttpRequest req = _Context.Request;
if (req.Files.Count = 0) {
Writestr("获取服务器上传文件失败");
return;
}
HttpPostedFile _file = req.Files[0];
//获取参数 // 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 = 0) throw new Exception("接收的数据不能为空");
byte[] dataOne = new byte[stream.Length];
stream.Read(dataOne, 0, dataOne.Length);
FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024);
try {
fs.Write(dataOne, 0, 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上传到服务器，追加中止、继续功能操作
p class="container">
p class="panel panel-default">
p class="panel-heading">
分段读取文件：/p>
p class="panel-body">
input type="file" id="file" />
br />
input type="button" value="中止" onclick="stop();
" />
&
emsp;
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>
/p>
/p>
/p>
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 = 0;
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, 1024);
try {
fs.Write(dataOne, 0, 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;
}
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
html5怎么实现图片转圈的动画效果
H5实现桌面通知
以上就是H5读取文件并上传到服务器的方法的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： H5读取文件并上传到服务器的方法
本文地址： https://pptw.com/jishu/583981.html