日期:2014-05-16 浏览次数:21059 次
利用swfupload上传头像,利用Jcrop来实现头像在线选择,然后提交个ashx对原头像进行剪切。代码如下:
default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Jcrop._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jcrop测试</title>
<script type="text/javascript" src="JS/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="JS/swfupload/swfupload.js"></script>
<script type="text/javascript" src="JS/swfupload/handlers.js"></script>
<script type="text/javascript" src="JS/Jcrop/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="JS/Jcrop/js/jquery.color.js"></script>
<script type="text/javascript" src="JS/mytest.js"></script>
<link href="JS/Jcrop/css/jquery.Jcrop.min.css" rel="Stylesheet" type="text/css" />
<link href="CSS/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var swfu;
window.onload = function () {
swfu = new SWFUpload({
upload_url: "imgUpload.ashx",
post_params: {
"ASP.NET_SESSIONID": "<%=Session.SessionID %>",
"ASPSESSID": "<%=Session.SessionID %>"
},
file_size_limit: "1024",
file_types: "*.jpg",
file_types_description: "JPG Images",
file_upload_limit: "-1",
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: uploadSuccess,
upload_complete_handler: uploadComplete,
button_image_url: "/Image/swfupload/XPButtonNoText_160x22.png",
button_width: "160",
button_height: "22",
button_placeholder_id: "spanButtonPlaceHolder1",
button_text: '<span class="theFont">选择文件</span>',
button_text_style: ".theFont { font-size: 13;}",
button_text_left_padding: 12,
button_text_top_padding: 3,
button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE, //SWFUplaod.BUTTON_ACTION.SELECT_FILES 可以多选文件
flash_url: "/JS/swfupload/swfupload.swf",
custom_settings: {
upload_target: "divFileProgressContainer1"
},
debug: false
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td height="25" width="30%" align="right">
用户头像 :
</td>
<td height="25" width="*" align="left">
<div id="swfu_container1" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceHolder1"></span>
</div>
<div id="divFileProgressContainer