详解html5图片上传支持图片预览压缩及进度显示兼容IE6及标准浏览器

<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>

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();

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)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 = &#39;<img  src="&#39; + src + &#39;" / alt="详解html5图片上传支持图片预览压缩及进度显示兼容IE6及标准浏览器 " >&#39;;

            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 = &#39;<img  src="&#39; + src + &#39;" / alt="详解html5图片上传支持图片预览压缩及进度显示兼容IE6及标准浏览器 " >&#39;;            
            try {                
            if (browser_ie > 6) 
            box.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=&#39;scale&#39;,src=&#39;" + src + "&#39;)";
            } catch (e) { }
        }

        callback && callback(src);
    }
}

//将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);
    };
}