这次给大家带来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 (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读取文件并上传到服务器的方法的详细内容。