仿淘宝头像上传功能（三）——兼容 IE6 浏览器。

前两篇目录：

之前的这两篇虽然实现了功能，但不兼容低版本浏览器，而且有些浏览器还会死机，所以现在重新做了个新的。

现已在 IE6，IE10,IE11，谷歌测试通过。

这次使用了这两个插件：

Jquery：1.11.2

上图文件插件：ajaxFileUpload

裁剪插件：imgAreaSelect

1.文件上传需要使用到 file 表单，但 file 表单样式太难看，需要进行自定义。

由于在IE下需要手动点击 file 表单才有效果，所以，无法使用 onclick 事件！！

解决办法就是使用样式，覆盖在 file 表单上传，当点击该样式的时候，实际上点击的是 file 表单。

2.ajaxFileUpload 插件的各种版本太多，这里给出自己使用的一个版本。

先直接给出JS源码了：

////////////////////////////////////////////////////////////////
// 上传头像JS
//上传头像插件：ajaxFileUpload
//裁剪插件：imgAreaSelect
///////////////////////////////////////////////////////////////

//上传文件按钮表单 ID。
var inputFileId = "fileupload_input";

//原图片显示 ID。
var sourceImageId = "photo";

//裁剪大图显示 ID。
var bigImageId = "cut1";

//裁剪中图显示 ID。
var centerImageId = "cut2";

//裁剪小图显示 ID。
var smallImageId = "cut3";

//临时图片（隐藏）。
var hiddenImage = "test";

//保存裁剪框左上角 X 坐标的表单。
var inputX = "X";

//保存裁剪框左上角 Y 坐标的表单。
var inputY = "Y";

//保存裁剪框宽度的表单。
var inputWidth = "Width";

//保存裁剪框高度的表单。
var inputHeight = "Height";

//提交按钮表单。
var submitButtonId = "btnAjaxSubmit";

//上传图片文件 URL。
var fileUploadUrl = "/user/icon/upload";

//提交裁剪坐标信息并保存图片的 URL。
var submitUrl = "/user/upload";

var hasFile = false;
var isSelect = false;
var imgArea = null;

//初始化选择控件
function InitSelect() {
    imgArea = $('#' + sourceImageId).imgAreaSelect({
        x1: 0, y1: 0, x2: 10, y2: 10,
        maxWidth: 300,
        maxHeight: 300,
        aspectRatio: '1:1',

        instance: true,
        persistent: true,
        //resizable: true,
        show: true,

        handles: true,
        onSelectEnd: preview
    });
}

function preview(img, selection) {
    //获取图片链接到缩略图
    var cut1 = $("#" + bigImageId);
    var cut2 = $("#" + centerImageId);
    var cut3 = $("#" + smallImageId);
    Zoom(img, cut1, selection, 180, 180);
    Zoom(img, cut2, selection, 50, 50);
    Zoom(img, cut3, selection, 30, 30);

    isSelect = true;

    $("#" + inputX).val(selection.x1);
    $("#" + inputY).val(selection.y1);
    $("#" + inputWidth).val(selection.width);
    $("#" + inputHeight).val(selection.height);

    CleanDisabled();
}

//缩放预览
function Zoom(source, imgCut, selection, X, Y) {
    var imgurl = $(source).attr("src");
    var sWidth = $(source).width();
    var sHight = $(source).height();

    $(imgCut).attr("src", imgurl);

    var scaleX = X / (selection.width || 1);
    var scaleY = Y / (selection.height || 1);

    $(imgCut).css({
        width: Math.round(scaleX * sWidth) + 'px',
        height: Math.round(scaleY * sHight) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

//重设原图宽高
function resetImg() {
    try {
        var source = $("#" + sourceImageId);
        var sWidth = $("#" + hiddenImage).width();
        var sHight = $("#" + hiddenImage).height();

        if (sWidth > sHight) {
            $(source).attr("width", 300);
            $(source).removeAttr("height");
        }
        else {
            $(source).attr("height", 300);
            $(source).removeAttr("width");
        }
    }
    catch (ex) {
        //showErr("截图程序异常");
    }
}

//默认图片选择区域
function setDefault_Selection() {
    var x = $("#" + hiddenImage).width();
    var y = $("#" + hiddenImage).height();

    var scale = 0.0;
    var x1, y1, x2, y2 = 0;
    if (x > y) {
        scale = 300 / x;
        x = 300;
        y = scale * y;
    }
    else {
        scale = 300 / y;
        y = 300;
        x = scale * x;
    }

    var rx = x / 2;
    var ry = y / 2;
    var length = 70;

    x1 = rx - length; y1 = ry - length;
    x2 = rx + length, y2 = ry + length;

    imgArea.setSelection(x1, y1, x2, y2);
    imgArea.update();

    preview($("#" + sourceImageId), imgArea.getSelection());
}

//图片上传预览
function previewImage(file) {
    ////只有高版本浏览器可用，可以直接使用本地图片预览。
    //if (file.files && file.files[0]) {
    //    if (file.files[0].type != "image/jpeg") {
    //        showErr("仅支持JPG图片文件，且文件小于3M");
    //        return;
    //    }

    //    if (file.files[0].size > 3145728) {
    //        showErr("仅支持JPG图片文件，且文件小于3M");
    //        $(file).attr("src", "");
    //        return;
    //    }

    //    var img = document.getElementById('photo');
    //    var reader = new FileReader();
    //    reader.onload = function (evt) {
    //        img.src = evt.target.result;
    //        $("#test").attr("src", evt.target.result);

    //        //延迟加载
    //        setTimeout(function () {
    //            hasFile = true;
    //            resetImg();
    //            InitSelect();
    //            setDefault_Selection();
    //        }, 200);
    //    }
    //    reader.readAsDataURL(file.files[0]);
    //}
    //else
    //    return;

    /*低版本浏览器兼容*/
    var selection = $("#" + sourceImageId).imgAreaSelect({ instance: true }).getSelection();
    $.ajaxFileUpload({
        url: fileUploadUrl,
        secureuri: false,
        fileElementId: inputFileId,              //文件上传域的ID
        data: selection,
        dataType: 'json',
        success: function (data, status)      //服务器成功响应处理函数
        {
            imgClear();

            //图片上传成功后，返回包含原图 URL 的 Json 对象。
            $("#" + sourceImageId).attr("src", data.Image + "?num=" + Math.random());
            $("#" + hiddenImage).attr("src", data.Image);

            //延迟加载
            setTimeout(function () {
                hasFile = true;
                resetImg();
                InitSelect();
                setDefault_Selection();
            }, 200);
        },
        error: function (data, status, e) {
            //showErr("头像加载失败,请重试或者联系管理员");
        }
    });
}

function imgClear() {
    $("#" + sourceImageId).attr("style", "");
    $("#" + sourceImageId).attr("src", "");
    $("#" + bigImageId).attr("src", "");
    $("#" + centerImageId).attr("src", "");
    $("#" + smallImageId).attr("src", "");
}

//取消禁用。
function CleanDisabled() {
    $("#" + submitButtonId).removeAttr("style");
    $("#" + submitButtonId).removeAttr("disabled");
}

//禁用按钮。
function SetDisabled() {
    $("#" + submitButtonId).attr("style", "background-color:#f39898;");
    $("#" + submitButtonId).attr("disabled", "disabled");
}

$("#" + submitButtonId).click(function () {
    $.ajax({
        type: "POST",
        url: submitUrl,
        data: $(this).parent().serialize(),
        dataType: 'json',
        success: function (data) {
            if (data.Status > 0) {
                //showSuc("头像上传成功！");
                //$("#currentIcon").attr("src", data.BigIcon);
                //$("#nav-top-icon").attr("src", data.SmallIcon);
            }
        },
        error: function () {
            //showErr("头像上传异常,请重试或者联系管理员");
        }
    });
});

View Code