IE 中上传前按比例预览图片

引言

在上一篇 jQuery + ashx 实现图片按比例预览、异步上传及显示 中核心是使用 HTML5 的 FileReader对象来实现。

但现在恶心的 IE 浏览器对HTML5支持太差，遂请教 google 大师，发现 juqey 中有个jquery.ajaxfileupload.js插件可实现无刷性上传文件，

此插件的原理是在文档中创建iframe和form，然后再将文件上传到服务器进行处理，并异步返回信息到客户端。

参考资料地址：

1. Asp.net使用ajax无刷新上传文件
2. jquery ajaxFileUpload.js 插件在IE9中的bug修复

思路

当浏览器为IE时，使用jquery 的ajaxfileupload插件上传到服务器由 ashx 转换为 base64 ，

然后再返回客户端按比例显示。这样浏览器就可以支持该死的 IE 啦！

代码

下载 ajaxfileupload 插件及示例 （官网的jquery  ajaxfileupload 插件测试未通过）。

1.修改上一篇中的 readURL 函数如下：

function readURL(input) {  
if ($.browser.msie && $(input).val() != "") {
        // IE 中的input file 对象必须包含 runat="server" 标签
        var file_id = $(input).attr("id");
        // 终于成功了，IE 中的input file 对象必须包含 runat="server" 标签
        $.ajaxFileUpload(
        {
            url: '../uploader.ashx',
            secureuri: false,
            fileElementId: file_id, //必须包含 runat="server" 标签  
	            dataType: 'text',
	            success: function (data, status) {
	                var base64 = $(data).text();
	                // $(input).parent().find("input[type=hidden]").val(base64);
	                $("#hf_base64").val(base64);
	                // var imgobj = $(input).parent().children("img");
	                var imgobj = $('#photo_img');
	                load_obj_base64(imgobj, base64);
	            },
	            error: function (data, status, e) {
	                //	                alert(status);
	                //	                alert(e);
	            }
	        });
    }
    else if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.readAsDataURL(input.files[0]);

        var maxWidth = 200, maxHeight = 200;
        reader.onload = function (e) {
            var base64 = e.target.result;
            $(input).parent().children("input[type=hidden]").val(base64);
            var imgobj = $(input).parent().children("img");
            load_obj_base64(imgobj, base64);
        };
    }
}

2.增加一个 uploader.ashx 处理 image 返回 base64

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;


    /// <summary>
    /// uploader 的摘要说明
    /// </summary>
    public class uploader : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

            try
            {
                HttpPostedFile file = context.Request.Files[0];

                byte[] buffer = null;

                string base64 = "data:image/jpeg;base64,";
                if (file != null)
                {
                    buffer = getByte(file);
                    base64 += Convert.ToBase64String(buffer);
                }

                //context.Response.Write(base64);
                context.Response.Write(@base64);
            }
            catch (Exception ex)
            {
                context.Response.Write("0");
            }
        }

        private byte[] getByte(HttpPostedFile file)
        {
            byte[] buffer = new byte[file.ContentLength];
            file.InputStream.Read(buffer, 0, buffer.Length);
            return buffer;
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }