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

本文介绍如何利用Uploadify插件在ASP.NET环境中实现异步上传图片的功能,包括配置步骤、错误处理及图片处理过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先说一下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('<img src="' + RequestData.path + '" id="biuuu" style="width:' + CreateWH.width + 'px;height:' + CreateWH.height + 'px;" />');
            $("#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("");
            $("<div><img src='" + RequestData.path + "' style='position: relative;width:" + CreateWH.width + "px;height:" + CreateWH.height + "px;' /></div>").css({
                float: 'left',
                position: 'relative',
                overflow: 'hidden',
                width: '160px',
                height: '160px'
            }).appendTo($('#smallImg160'));
            $('#smallImg80').html("");
            $("<div><img src='" + RequestData.path + "' style='position: relative;width:" + (CreateWH.width / 2) + "px;height:" + (CreateWH.height / 2) + "px;' /></div>").css({
                float: 'left',
                position: 'relative',
                overflow: 'hidden',
                width: '80px',
                height: '80px'
            }).appendTo($('#smallImg80'));
            $('#smallImg40').html("");
            $("<div><img src='" + RequestData.path + "' style='position: relative;width:" + (CreateWH.width / 4) + "px;height:" + (CreateWH.height / 4) + "px;' /></div>").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("请先登录");
                        }
                    }
                });
            });
        }
    });


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值