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

引言

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

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

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

参考资料地址：

Asp.net使用ajax无刷新上传文件
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;
}
}
}