客户端代码是网上找的，修改为.net代码。

<html>
<head>
    <meta charset="utf-8">
    <title>使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</title>
    <style type="text/css">
        body
        {
            margin: 0px;
            background: #f2f2f0;
        }
        p
        {
            margin: 0px;
        }
        .title
        {
            color: #FFFF00;
            background: #000000;
            text-align: center;
            font-size: 24px;
            line-height: 50px;
            font-weight: bold;
        }
        .file
        {
            position: absolute;
            width: 100%;
            font-size: 90px;
            display: none;
        }
        .filebtn
        {
            display: block;
            position: relative;
            height: 110px;
            color: #FFFFFF;
            background: #06980e;
            font-size: 48px;
            line-height: 110px;
            text-align: center;
            cursor: pointer;
            border: 3px solid #cccccc;
        }
        .filebtn:hover
        {
            background: #04bc0d;
        }
        .showimg
        {
            margin: 10px auto 10px auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            // 选择图片  
            document.getElementById('img').onchange = function () {

var input = document.getElementById("img");
                var img = input.files[0];
                // 判断是否图片  
                if (!img) {
                    return;
                }

// 判断图片格式  
                if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name))) {
                    alert('图片只能是jpg,gif,png');
                    return;
                }

var reader = new FileReader();
                reader.readAsDataURL(img);

reader.onload = function (e) { // reader onload start  
                    // ajax 上传图片  
                    $.post("Handler.ashx", { imgname: img.name, img: e.target.result }, function (ret) {

var www = ret;
                        if (ret != '') {
                            alert('upload success');
                            $('#showimg').html('<img src="' + ret + '">');
                        } else {
                            alert('upload fail');
                        }
                    }, 'text'); //这里返回的类型有：json,html,xml,text
                } // reader onload end  
            }

}  
    </script>
</head>
<body>
    <p class="title">
        使用html5 FileReader获取图片，并异步上传到服务器(not iframe)</p>
    <p>
        <input type="file" class="file" id="img"><%--加入multiple可多选--%><label class="filebtn"
            for="img" title="JPG,GIF,PNG">请选择图片</label></p>
    <p class="showimg" id="showimg">
    </p>
</body>
</html>

服务端代码：

public void ProcessRequest(HttpContext context)
    {
        if (context.Request["img"] != null)//生成校验码
        {
            string imgname = context.Request["imgname"];
            string imgExtention = System.IO.Path.GetExtension(imgname).ToLower();
            if (imgExtention != ".jpg" && imgExtention != ".jpe" && imgExtention != ".jpeg" && imgExtention != ".gif" && imgExtention != ".png" && imgExtention != ".bmp")
            {
                string s = "原图片文件格式不正确,支持的格式有[ .jpg|.jpe|.jpeg|.png|.bmp|.gif ]！";
                
            }
            string imgData = context.Request["img"];
            string[] ss =imgData.Split(',');
            byte[] imageBytes = Convert.FromBase64String(ss[1]);
            //读入MemoryStream对象
            System.IO.MemoryStream memoryStream = new System.IO.MemoryStream(imageBytes, 0, imageBytes.Length);
            memoryStream.Write(imageBytes, 0, imageBytes.Length);
            //转成图片
            System.Drawing.Image image = System.Drawing.Image.FromStream(memoryStream);
            image.Save("硬盘存储地址" + imgname);
            context.Response.Write("Web服务器地址" + imgname);

context.Response.End();
        }
    }

html5使用FileReader上传图片的更多相关文章

  1. 网站开发进阶(三十二)HTML5之FileReader的使用

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型 ...

  2. HTML5 之 FileReader 方法上传并读取文件

    原文地址:https://caochangkui.github.io/file-upload/ HTML5 的 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据 ...

  3. HTML5之FileReader的使用

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  4. HTML5 通过 FileReader 实现文件上传

    概述 在页面中上传时,之前一般都是需要使用form表单进行上传.html5 中提供了FileReader 可以将文件转换成Base64编码字符串,因此就可以直接使用 AJAX实现文件上传. 实现代码 ...

  5. [转] HTML5之FileReader的使用

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  6. HTML5 本地裁剪上传图片

    很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...

  7. HTML5之FileReader的使用.RP

    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...

  8. HTML5 之 FileReader 的使用 （网页上图片拖拽并且预显示可在这里学到） ［转载］

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511416.shtml FileReader 资料(英文) : https://d ...

  9. FileReader上传图片

    实现拖拽图片,在上传至服务器前,显示图片并操控大小 利用HTML5 dragenter dragover dragleave drop 在实现图片显示方面,用了FileReader这个类 var fi ...

随机推荐

  1. java多线程-Java中的Copy-On-Write容器

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改, ...

  2. Android开发涉及有点概念&相关知识点（待写）

    前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...

  3. shell 脚本注意事项

    设脚本名为test.sh 第一行应该为#! /bin/bash 1.运行和调试的结果是不一样的 调试 sh -x test.sh  这时在计算两个数的和sum=$[$a+$b]时得到sum=3+4,而 ...

  4. 《HTML5秘籍》学习总结--2016年7月24日

    前段时间因为工作中看到同事使用了一个type为date的<input>元素,直接就形成了一个日期选择的表单控件,当时觉得很神奇,以为是什么插件,就问了同事是怎么做出来的,同事告诉我这是HT ...

  5. 王爽-汇编语言-综合研究一-搭建简易C环境

    (一) 学习过程: 整个过程分为两个部分: 第一:将TC2.0的环境使用虚拟软盘复制到DOS虚拟机中: 打开WinImage,fileànew,由于TC2.0的环境解压后为2.02M,所以我们在Sta ...

  6. java常用类

    String 字符串类 System 可得到系统信息 Runtime类 StringBuilder(StringBuffer)类 Thread 线程类 Math 与数学有关的工具类 Date 日期类( ...

  7. Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

    一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个 ...

  8. centos使用jexus支持php小记录

    安装php(文章参考http://linuxdot.net/bbsfile-3132) yum install php 1)修改“/etc/php.ini”文件(有的位置在/etc/php5/cgi/ ...

  9. Java集合框架面试题

    www.cnblogs.com/zhxxcq/archive/2012/03/11/2389611.html 这里的两个图很形象,由于放进图片链接,图片显示不了,所以只能给出该链接. Java集合框架 ...

  10. Dynamic CRM 2013学习笔记（三）快速创建实体 EntityCreater

    一.实体简介 实体用于在 Microsoft Dynamics CRM 中建立业务数据模型和管理业务数据.例如,可以使用客户.市场活动和事件(案例)等实体跟踪和支持销售.市场营销和服务活动.实体具有一 ...