先说一下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("请先登录");
}
}
});
});
}
});