一、读取文件为blob并上传到服务器

HTML

<div class="container">
<!--读取要上传的文件-->
<input type="file" id="file" />
<input type="button" id="btn1" value="点击上传" onclick="uploadClick();" />
</div>

JS

//读取图片实例,并上传到服务器
var fileBox = document.getElementById('file');
fileBox.onchange = function () {
//获取选择文件的数组
var fileList = fileBox.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
uploadFile(file);
}
}
//关键代码上传到服务器
function uploadFile(file) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
var blob = new Blob([reader.result]);
//提交到服务器
var fd = new FormData();
fd.append('file', blob);
var ext = file.name.substring(file.name.lastIndexOf('.'));
fd.append('extention', ext);
fd.append('maxsize', 1024*1024*4);//Asp.net 默认一次上传最大4MB
fd.append('isClip', -1);
var xhr = new XMLHttpRequest();
xhr.open('post', '../ashx/upload.ashx', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = eval('(' + xhr.responseText + ')');
console.info(data);
if (data.success) {
//上传成功
var imgName = data.msg;
alert(imgName);
} else {
alert(data.msg);
}
}
}
//开始发送
xhr.send(fd);
}
}

后台C#处理关键代码:

//接收文件
HttpRequest req = _Context.Request;
string newname = _fileInfo.CreateNewName(newExtention);
//接收二级制数据并保存
Stream stream = _PostedFile.InputStream;
byte[] dataOne = new byte[stream.Length];
stream.Read(dataOne, , dataOne.Length);
FileStream fs = new FileStream(_fileInfo.TempFile + newname, FileMode.Create, FileAccess.Write);
try
{
fs.Write(dataOne, , dataOne.Length);
}
finally
{
fs.Close();
stream.Close();
}
return newname;

二、读取图片文件,并上传到服务器

HTML

<div class="container">
<!--图片类型验证方法1-->
<input type="file" id="file" accept="image/*" />
<input type="button" id="btn1" value="点击上传" onclick="uploadClick();" />
<h4>选择文件如下:</h4>
<img src="" id="img1" />
</div>

JS:

//读取图片实例,并上传到服务器
var fileBox = document.getElementById('file');
fileBox.onchange = function () {
//获取选择文件的数组
var fileList = fileBox.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
//图片类型验证第二种方式
if (/image\/\w+/.test(file.type))
readFile(file);
else
console.log(file.name + ':不是图片');
}
}
//读取二进制图片文件,并上传到服务器
function uploadClick() {
var fileList = fileBox.files;
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
//图片类型验证第二种方式
if (/image\/\w+/.test(file.type))
uploadFile(file);
else
console.log(file.name + ':不是图片');
}
}
//关键代码上传到服务器
function uploadFile(file) {
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function () {
var blob = new Blob([reader.result], { type: 'image/jpg' });
//提交到服务器
var fd = new FormData();
fd.append('file', blob);
var ext = file.name.substring(file.name.lastIndexOf('.'));
fd.append('extention', ext);
fd.append('isClip', -1);
var xhr = new XMLHttpRequest();
xhr.open('post', '../ashx/upload.ashx', true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = eval('(' + xhr.responseText + ')');
console.info(data);
if (data.success) {
//上传成功
var imgName = data.msg;
alert(imgName);
} else {
alert(data.msg);
}
}
}
//开始发送
xhr.send(fd);
}
}
//读取图片内容 为DataURL
function readFile(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var result = reader.result;
$('.container blockquote').text(result);
$('#img1').attr('src', result)
}
}

后台关键代码处理同上。

读取文件二:http://www.cnblogs.com/tianma3798/p/5839791.html

读取文件一:http://www.cnblogs.com/tianma3798/p/4355949.html

HTML5 文件域+FileReader 读取文件并上传到服务器(三)的更多相关文章

  1. HTML5 文件域+FileReader 读取文件(一)

    在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点: 每次只能选择一个文件进行上传 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容 一.File ...

  2. HTML5 文件域+FileReader 读取文件(二)

    一.读取文本文件内容,指定字符编码 <div class="container"> <!--文本文件验证--> <input type="f ...

  3. uboot下读取flash,上传tftp服务器、下载

    上传 setenv gatewayip 192.168.1.1; setenv serverip 192.168.1.7; setenv ipaddr 192.168.1.156 ; mw.b 0x8 ...

  4. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

  5. HTML5 文件域+FileReader 分段读取文件并上传(七)-WebSocket

    一.单文件上传实例 HTML: <div class="container"> <div class="panel panel-default" ...

  6. HTML5 文件域+FileReader 分段读取文件并上传到服务器(六)

    说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中. 1.简单分段读取文件为 ...

  7. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  8. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  9. Html5+NodeJS——拖拽多个文件上传到服务器

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...

随机推荐

  1. Phonegap 3.0 拍照 出错的说明

    在官方3.0 提供的摄像机操作例子是不成功的,因为该例子没有说明摄像机操作需要添加Plugin. 添加插件方法(安装cordova3.0时必须使用官方命令行方式,通过nodejs安装,且装上了git) ...

  2. Flyer

    hdu4768:http://acm.hdu.edu.cn/showproblem.php?pid=4768 题意:给你1--2^32个位置,然后有m个操作,每次操作给你3个数 a,b,c,然后在a, ...

  3. Java 引用 WeakReference

    Reference 是一个抽象类,而 SoftReference,WeakReference,PhantomReference 以及 FinalReference 都是继承它的具体类.接下来我们来分别 ...

  4. Android 自定义dialog(AlertDialog的修改样式)

    LayoutInflater inflater = LayoutInflater(AudioActivity.this); View timepickerview = inflater.inflate ...

  5. BZOJ2083: [Poi2010]Intelligence test

    2083: [Poi2010]Intelligence test Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 241  Solved: 96[Sub ...

  6. Android 布局之DrawLayout

    在刚开始学android的时候肯定会知道,android的主要的布局就是LinearLayout.RelativeLayout.FramLayout.AbsoluteLayout.以及TableLay ...

  7. Ural 1258 镜面对称

    #include<cstdio> #include<cstring> #include<cmath> #include<iostream> #inclu ...

  8. Android WebRTC 音视频开发总结

    www.cnblogs.com/lingyunhu/p/3621057.html 前面介绍了WebRTCDemo的基本结构,本节主要介绍WebRTC音视频服务端的处理,,转载请说明出处(博客园RTC. ...

  9. Google财经

    本博文的主要内容有 .Google财经的介绍   .市场    .新闻 .投资组合新闻   .投资组合 1.Google财经的介绍 https://zh.wikipedia.org/wiki/Goog ...

  10. [置顶] Linux高编之进程--------fork函数的同步与异步(兄弟子进程和父子孙进程示列)

    前面讲述的fork函数的基本用法,下面通过两个程序来说明fork函数同步与异步之间的关系: <1>通过fork函数实现在父进程下的四个兄弟子进程(即异步) : 函数实现代码: #inclu ...