HTML5 文件域+FileReader 读取文件并上传到服务器(三)

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

//读取图片实例,并上传到服务器
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);
}
}

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

<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>

//读取图片实例,并上传到服务器
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)
}
}