ASP.NET简单实现APP中用户个人头像上传和裁剪

 

最近有个微信项目的用户个人中心模块中,客户要求用户头像不仅仅只是上传图片,还需要能对图片进行裁剪。考虑到flash在IOS和Android上的兼容性问题,于是想着能从js这块入手,在网上发现了devotion博主写的《适应各浏览器图片裁剪无刷新上传js插件》文章,从中受到些许启发,以此为参考,进行了简单的修改。

 

新建一个页面,代码如下:



    
    图片裁剪
    
    
    
    
    
    
    


    
取消
确定

 

页面中jquery.Jcrop.min.css和jquery.Jcrop.min.js是Jcrop插件必须的一个样式表文件和js文件,jquery可以自行下载,然后后面的imageCropperUpload.js文件是devotion博主写的插件,我自己简单的修改了一下,注意引用顺序不要弄错了,否则不起作用。

 

(function ($) {
    var defaultSettings = {
        url: "uploadImg/",                       //上传地址  
        fileSuffixs: ["jpg", "png"],             //允许上传的文件后缀名列表  
        errorText: "不能上传后缀为 {0} 的文件!", //错误提示文本,其中{0}将会被上传文件的后缀名替换  
        onCheckUpload: function (text) { //上传时检查文件后缀名不包含在fileSuffixs属性中时触发的回调函数,(text为错误提示文本)  
        },
        onComplete: function (msg) { //上传完成后的回调函数[不管成功或失败,它都将被触发](msg为服务端的返回字符串) 
            alert(msg);
        },

        onChosen: function (file, obj, fileSize, errorTxt) { /*选择文件后的回调函数,(file为选中文件的本地路径;obj为当前的上传控件实例,
                                                                    fileSize为上传文件大小,单位KB[只有在isFileSize为true时,此参数才有值],
                                                                     errorTxt为获取文件大小时的错误文本提示)  */
            //alert(file);  
        },
        cropperParam: {}, //图片截取参数设置,此参数即为Jcrop插件参数
        isFileSize: false,//是否获取文件大小
        perviewImageElementId: "",//用于预览上传图片的元素id(请传入一个div元素的id)  

        perviewImgStyle: null//用于设置图片预览时的样式(可不设置,在不设置的情况下多文件上传时只能显示一张图片),如{ width: '100px', height: '100px', border: '1px solid #ebebeb' }  
    };


    $.fn.cropperUpload = function (settings) {

        settings = $.extend({}, defaultSettings, settings || {});

        return this.each(function () {
            var self = $(this);

            var upload = new UploadAssist(settings);

            upload.createIframe(this);

            //绑定当前按钮点击事件  
            self.bind("click", function (e) {
                upload.chooseFile();
            });

            //将上传辅助类的实例,存放到当前对象中,方便外部获取  
            self.data("uploadFileData", upload);

            //创建的iframe中的那个iframe,它的事件需要延迟绑定  
            window.setTimeout(function () {
                $(upload.getIframeContentDocument().body).find("input[type='file']").change(function () {
                    if (!this.value) return;
                    var fileSuf = this.value.substring(this.value.lastIndexOf(".") + 1);


                    //检查是否为允许上传的文件  
                    if (!upload.checkFileIsUpload(fileSuf, upload.settings.fileSuffixs)) {
                        upload.settings.onCheckUpload(upload.settings.errorText.replace("{0}", fileSuf));
                        return;
                    }

                    if (upload.settings.isFileSize) {
                        var size = perviewImage.getFileSize(this, upload.getIframeContentDocument());
                        var fileSize, errorTxt;
                        if (size == "error") {
                            errorTxt = upload.errorText;
                        } else {
                            fileSize = size;
                        }
                        //选中后的回调  
                        upload.settings.onChosen(this.value, this, fileSize, errorTxt);
                    } else {
                        //选中后的回调  
                        upload.settings.onChosen(this.value, this);
                    }


                    //是否开启了图片预览  
                    if (upload.settings.perviewImageElementId) {
                        var main = perviewImage.createPreviewElement("closeImg", this.value, upload.settings.perviewImgStyle);
                        $("#" + upload.settings.perviewImageElementId).append(main);
                        var div = $(main).children("div").get(0);

                        perviewImage.beginPerview(this, div, upload.getIframeContentDocument(), upload);
                        $("#fileList").children().children("div").css("height", "100%").css("border", "none");
                    }
                });

                //为创建的iframe内部的iframe绑定load事件  
                $(upload.getIframeContentDocument().body.lastChild).on("load", function () {
                    var dcmt = upload.getInsideIframeContentDocument();
                    upload.submitStatus = true;
                    if (dcmt.body.innerHTML) {


                        if (settings.onComplete) {
                            settings.onComplete(dcmt.body.innerHTML);
                        }


                        dcmt.body.innerHTML = "";
                    }
                });
            }, 100);
        });
    };
})(jQuery);


//上传辅助类
function UploadAssist(settings) {
    //保存设置
    this.settings = settings;
    //创建的iframe唯一名称
    this.iframeName = "upload" + this.getTimestamp();
    //提交状态
    this.submitStatus = true;
    //针对IE上传获取文件大小时的错误提示文本
    this.errorText = "请设置浏览器一些参数后再上传文件,方法如下(设置一次即可):\n请依次点击浏览器菜单中的\n'工具->Internet选项->安全->可信站点->自定义级别'\n在弹出的自定义级别窗口中找到 'ActiveX控件和插件' 项,将下面的子项全部选为 '启用' 后,点击确定。\n此时不要关闭当前窗口,再点击 '站点' 按钮,在弹出的窗口中将下面复选框的 '√' 去掉,然后点击 '添加' 按钮并关闭当前窗口。\n最后一路 '确定' 完成并刷新当前页面。";

    this.jcropApi;
    return this;
}
UploadAssist.prototype = {
    //辅助类构造器
    constructor: UploadAssist,

    //创建iframe
    createIframe: function (/*插件中指定的dom对象*/elem) {

        var html = ""
        + ""
        + "upload"
        + "
                    
                    

你可能感兴趣的:(ASP.NET)