asp.net+uploadify实现图片上传图片

先说一下asp.net异步上传图片,现在流行的比较好用的就属uploadify上传。


$("#file_upload").uploadify({
        'auto': true,
        'swf': '/template/js/cutImg/uploadify/uploadify.swf',
        'uploader': '/template/js/cutImg/upload.ashx',
        'multi': false, //是否能选择多个文件
        'queueID': 'fileQueue', //显示上传文件队列的元素id,可以简单用一个div来显示
        'cancelImage': '/template/js/cutImg/uploadify/uploadify-cancel.png', //[必须设置]取消图片的路径
        'buttonText': '', //上传按钮的文字
        'buttonImage': '/template/images/people.png', //上传按钮的背景图片
        'width': 100, //上传按钮的高和宽 
        'height': 30,
        'removeCompleted': true,  //表示在上传完成后是否删除队列中的对应元素。默认是True,即上传完成后就看不到上传文件进度条了
        "removeTimeout": "0", //表示上传完成后多久删除队列中的进度条,默认为3
        "fileSizeLimit": "4096KB", //上传文件大小限制,默认单位是KB
        "fileTypeExts": "*.jpg;*.gif;*.png", //指定允许上传的文件类型。默认*.*
        "formData": { "folder_name": "UserHead" },//添加自定义参数
        "onSelect": function () { //选择文件后触发 
            //禁用Uploadify
            //$("#file_upload").uploadify("disable", true);
        },
        'overrideEvents': ['onSelectError', 'onDialogClose'], //屏蔽内部错误提示
        'onFallback': function () { //检测FLASH失败调用
            FunMsg("您未安装FLASH控件,无法上传!请安装FLASH控件后再试。");
        },
        "onSelectError": function (file, errorCode, errorMsg) {
            //选择文件出错时触发,返回file,erroCode,errorMsg三个参数
            /*
            errorCode是一个包含了错误码的js对象,用来查看事件中发送的错误码,以确定错误的具体类型,可能会有以下的常量:
            QUEUE_LIMIT_EXCEEDED:-100 选择的文件数量超过设定的最大值;
            FILE_EXCEEDS_SIZE_LIMIT:-110 文件的大小超出设定
            INVALID_FILETYPE:-130 选择的文件类型跟设置的不匹配
    
            errorMsg 完整的错误信息,如果你不重写默认的事件处理器,可以使用‘this.queueData.errorMsg’ 存取完整的错误信息
            */
           
            var settings = this.settings;
            if (errorCode == -110) {
                FunMsg("文件最大限制" + settings.fileSizeLimit);
            }
            if (errorCode == -130) {
                FunMsg("图片格式只支持:*.jpg;*.gif;*.png");
            }
        },
        "onUploadStart": function (file) {
            /*
            每更新一个文件上传进度的时候触发,返回以下参数
            file 正上传文件对象
            bytesUploaded 文件已经上传的字节数
            bytesTotal 文件的总字节数
            totalBytesUploaded 在当前上传的操作中(所有文件)已上传的总字节数
            totalBytesTotal 所有文件的总上传字节数
            */

            //动态设置参数的值
            //$("#file_upload").uploadify("settings", "formData", {"id":"1"});
        },
        "onUploadError": function (file, errorCode, erorMsg, errorString) {
            /*一个文件完成上传但返回错误时触发,有以下参数                
            file 完成上传的文件对象
            errorCode 返回的错误代码
            erorMsg 返回的错误信息
            errorString 包含所有错误细节的可读信息*/
        },
        "onUploadSuccess": function (file, data, response) {
            if (data == "sizeError") {
                FunMsg("图片长宽必须大于等于160像素");
                return;
            }
            var RequestData = eval("(" + data + ")");
            //计算图片长宽并适应DIV大小
            var CreateWH = eval("(" + DrawImage(RequestData.width, RequestData.height, 260, 260) + ")");
            //把算好的图片添加到指定的位置
            $("#biuuu_parent").html('');
            $("#w").val(Math.round(CreateWH.width)); $("#h").val((CreateWH.height));
            $(".imgareaselect-selection").parent().remove();
            $(".imgareaselect-outer").remove();

            //开始初始化截图
            $('#biuuu').imgAreaSelect({
                x1: 0, y1: 0, x2: 160, y2: 160,
                aspectRatio: '1:1', //选择框比例,这里1:1为正方形
                handles: true, //四角方块隐现                
                onSelectChange: preview //选择框变化时触发事件
            });

            //初始化小头像显示
            $('#smallImg160').html("");
            $("
").css({ float: 'left', position: 'relative', overflow: 'hidden', width: '160px', height: '160px' }).appendTo($('#smallImg160')); $('#smallImg80').html(""); $("
").css({ float: 'left', position: 'relative', overflow: 'hidden', width: '80px', height: '80px' }).appendTo($('#smallImg80')); $('#smallImg40').html(""); $("
").css({ float: 'left', position: 'relative', overflow: 'hidden', width: '40px', height: '40px' }).appendTo($('#smallImg40')); $("a[data-name=save]").unbind("click").click(function () { jQuery.post("/template/js/cutImg/save.ashx", { "pathimg": RequestData.jdpath, "h": $("#h").val(), "w": $("#w").val(), "x": $("#x").val(), "y": $("#y").val() }, function (data, status) { if (status == "success") { if (data == "0") { FunAlert("保存成功"); } else if (data == "-1") { FunAlert("请先登录"); } } }); }); } });


你可能感兴趣的:(ASP.NET编程,uploadify)