一、读取文件为blob并上传到服务器
HTML
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, 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; 二、读取图片文件，并上传到服务器
HTML
选择文件如下:
![]()
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); }}//读取图片内容 为DataURLfunction 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) }} 后台关键代码处理同上。
读取文件二：
读取文件一：