以前写过上传组件，见 打造 html5 文件上传组件，实现进度显示及拖拽上传，兼容ie6+及其它标准浏览器，对付一般的上传没有问题，不过如果是上传图片，且需要预览的话，就力有不逮了，趁着闲暇时间，给上传组件添加了单独的图片上传ui，支持图片预览和缩放（通过调整图片的大小以实现图片压缩）。
v1.4版本已支持秒传+分片上传+断点续传（ie10+、其它标准浏览器），具体请参考github代码。上传组件特点轻量级，不依赖任何js库，核心代码（q.uploader.js）仅约700行，min版本加起来不到12kb
纯js代码，无需flash，无需更改后台代码即可实现带进度条（ie10+、其它标准浏览器）的上传，其它（eg：ie6+）自动降级为传统方式上传
单独的图片上传ui，支持图片预览（ie6+、其它浏览器）和缩放（ie10+、其它浏览器）
上传核心与ui界面分离，可以很方便的定制上传界面包括上传按钮
上传文件的同时可以指定上传参数，支持上传类型过滤
完善的事件回调，可针对上传的每个过程进行单独处理
方便的ui接口，上传界面可以随心所欲的定制
效果如上图。由于浏览器不同，压缩效果各有不同，一个1.1mb、分辨率为 1920x1200 的图片，分辨率缩放为 1024x640 ,ie11上传后为199kb，chrome45上传后为277kb，firefox41上传后为360kb。
使用代码html代码，导入样式及js上传组件，定义上传按钮及视图：
<link href="../css/uploader-image.css" rel="stylesheet" type="text/css" /><p>
<a id="upload-target" class="x-button">添加图片并上传</a>
</p>
<p id="upload-view">
</p>
<script type="text/javascript" src="../q.uploader.image.all.js"></script>
js组件调用：
var uploader = new q.uploader({
url: "api/upload.ashx",
target: document.getelementbyid("upload-target"),
view: document.getelementbyid("upload-view"), //auto: false,
//图片缩放 scale: { //要缩放的图片格式
types: ".jpg", //最大图片大小(width|height)
maxwidth: 1024
}
});//uploader.start();
一般无需更改后台代码，但如果使用了图片缩放（压缩），firefox、chrome 较早的版本上传后，后台可能会获取不到文件名，需要略微处理一下。以asp.net为例：
httprequest request = context.request;int c = request.files.count;
//接收上传的数据并保存到服务器
for (int i = 0; i < c; i++)
{
httppostedfile file = request.files[i];
//为兼容一些较早的浏览器，此处优先使用上传组件传递的文件名
string filename = request["filename"];
if (string.isnullorempty(filename)) filename = system.io.path.getfilename(file.filename);
string path = context.server.mappath("~/upload/" + filename);
file.saveas(path);
}
关于上传参见 打造 html5 文件上传组件，实现进度显示及拖拽上传，兼容ie6+及其它标准浏览器
关于预览ie10+等浏览器使用html5 api，其它浏览器使用滤镜预览。需要注意的是，ie8+由于安全性考虑，会获取不到文件真实地址，需要特殊处理一下。
//生成图片预览地址(html5)function readasurl(file, callback) {
var url = window.url || window.webkiturl;
if (url) return callback(url.createobjecturl(file));
if (window.filereader) {
var fr = new filereader();
fr.onload = function (e) {
callback(e.target.result);
};
fr.readasdataurl(file);
} else if (file.readasdataurl) {
callback(file.readasdataurl());
}
}//图片预览function previewimage(box, task, callback) {
var input = task.input,
file = task.file || (input.files ? input.files[0] : undefined);
if (file) {
//ie10+、webkit、firefox etc
readasurl(file, function (src) {
if (src) box.innerhtml = '<img src="' + src + '" />';
callback && callback(src);
});
} else if (input) {
var src = input.value;
if (!src || /^\w:\\fakepath/.test(src)) {
input.select();
//解决ie报拒绝访问的问题
parent.document.body.focus();
//获取图片真实地址
if (document.selection) src = document.selection.createrange().text;
} if (src) {
box.innerhtml = '<img src="' + src + '" />';
try {
if (browser_ie > 6)
box.style.filter = "progid:dximagetransform.microsoft.alphaimageloader(sizingmethod='scale',src='" + src + "')";
} catch (e) { }
}
callback && callback(src);
}
}
关于缩放（压缩）原理是先通过canvas调整图片大小，生成base64数据，然后再通过html5 api （blob） 转换为二进制对象上传。
//将dataurl转为blob对象，以用于ajax上传
function dataurltoblob(base64, mimetype) {
var ds = base64.split(','),
data = atob(ds[1]),
arr = [];
for (var i = 0, len = data.length; i < len; i++) {
arr[i] = data.charcodeat(i);
} if (blob) return new blob([new uint8array(arr)], { type: mimetype });
var builder = new blobbuilder();
builder.append(arr);
return builder.getblob(mimetype);
}//图片缩放function scaleimage(src, mimetype, ops, callback) {
var image = new image();
image.src = src;
image.onload = function () {
var width = image.width,
height = image.height,
maxwidth = ops.maxwidth,
maxheight = ops.maxheight,
haswidthscale = maxwidth && width > maxwidth,
hasheightscale = maxheight && height > maxheight,
hasscale = haswidthscale || hasheightscale;
//无需压缩
if (!hasscale) return callback && callback(false);
//根据宽度缩放
if (haswidthscale) {
width = maxwidth;
height = math.floor(image.height * width / image.width);
} //根据高度缩放
if (hasheightscale) {
height = maxheight;
width = math.floor(image.width * height / image.height);
} var canvas = document.createelement("canvas"),
ctx = canvas.getcontext("2d");
canvas.width = width;
canvas.height = height;
ctx.drawimage(image, 0, 0, width, height);
callback && callback(canvas.todataurl(mimetype), mimetype);
};
}
相关文章：
用html5轻松实现图片预览
javascript实现图片预览和上传（兼容ie）代码分享
javascript进阶(八)js实现图片预览并导入服务器功能
以上就是详解html5图片上传支持图片预览压缩及进度显示兼容ie6及标准浏览器 的详细内容。