一、读取文件为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. Oracle数据库迁移

    1 在数据迁移时,用户首先有权限修改数据库,并且进行表空间创建.删除等权利 例如: select * from dba_tab_privs where grantee='SCOT'; ---查看SCO ...

  2. 关于const和define的内存分配问题的总结

    关于const和define的内存分配问题 const与#define宏定义的区别----C语言深度剖析 1,  const定义的只读变量在程序运行过程中只有一份拷贝(因为它是全局的只读变量,存放在静 ...

  3. python 练习 30

    Python从设计之初就已经是一门面向对象的语言,正因为如此,在Python中创建一个类和对象是很容易的.本章节我们将详细介绍Python的面向对象编程. 如果你以前没有接触过面向对象的编程语言,那你 ...

  4. 设计模式的一些杂谈与反思---functionn和signals

    以下关于GOF的一些例子命名不是很准确,但是大概意思差不多,懒得再去翻书了 模拟观察者模式 模拟中介者模式 模拟command模式 模拟memento和command   模拟观察者模式 观察者与职责 ...

  5. [WPF]解决ListView在没有Items时,水平滚动条不出现的问题

    转载地址:http://www.cnblogs.com/nankezhishi/archive/2010/03/19/FixListViewNotScrollHeaderBug.html 在上一篇Bl ...

  6. 【转】HTTP长连接与短连接(2)

    一.什么是长连接 HTTP1.1规定了默认保持长连接(HTTP persistent connection ,也有翻译为持久连接),数据传输完成了保持TCP连接不断开(不发RST包.不四次握手),等待 ...

  7. 2017-12-19python全栈9期第四天第三节之iterable可迭代对象join之字符串和列表转换成字符串和range

    #!/user/bin/python# -*- coding:utf-8 -*-s = 'zd's1 = '_'.join(s)print(s1)li = ['zs','ls','ww','zl',' ...

  8. Elasticsearch索引mapping的写入、查看与修改(转)

    mapping的写入与查看 首先创建一个索引: curl -XPOST "http://127.0.0.1:9200/productindex" {"acknowledg ...

  9. [Memcached] telnet命令

    一:连接命令 在windows下的cmd或者Linux执行 telnet 127.0.0.1 11211 (如果此处报错"telnet不是内部或外部命令",一定是没有安装telne ...

  10. python免费发送短信

    pip install twilio from twilio.rest import Client # Your Account SID from twilio.com/console account ...