实例介绍
【实例简介】
【实例截图】
方式一：
方式二：
【核心代码】
上传和截图代码一：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadImg.aspx.cs" Inherits="flash实现头像上传的两种方式.swfupload上传和截图.UploadImg" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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></title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<link href="../themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../JS/handlers.js" type="text/javascript"></script>
<script src="../JS/swfupload.js" type="text/javascript"></script>
<script src="../JS/jquery-1.7.1.js" type="text/javascript"></script>
<script src="../JS/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
var swfu;
window.onload = function () {
swfu = new SWFUpload({
// Backend Settings
//修改执行上传操作的文件(aspx或ashx)
upload_url: "cutPhoto.ashx?action=up",
post_params: {
"ASPSESSID": "<%=Session.SessionID %>"
},
// File Upload Settings
file_size_limit: "2 MB",
file_types: "*.jpg",
file_types_description: "JPG Images",
file_upload_limit: 0, // Zero means unlimited
// Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
swfupload_preload_handler: preLoad,
swfupload_load_failed_handler: loadFailed,
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
//指定图片上传成功后执行的方法为我们自己定义的ShowData
upload_success_handler: ShowData,
upload_complete_handler: uploadComplete,
// Button settings
button_image_url: "images/XPButtonNoText_160x22.png",
button_placeholder_id: "spanButtonPlaceholder",
button_width: 160,
button_height: 22,
button_text: '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 5,
// Flash Settings
flash_url: "/Flash/swfupload.swf", // Relative to this file
flash9_url: "/Flash/swfupload_FP9.swf", // Relative to this file
custom_settings: {
upload_target: "divFileProgressContainer"
},
// Debug Settings
debug: false
});
}
//上传成功后执行,将img标签的src设置为返回的图片保存好的路径
var d;//保存上传成功图片的路径信息
function ShowData(file, serverData) {
d = serverData.split(":");
if (d[0] == "ok") {
$("#divContent").css("backgroundImage","url(" d[1] ")").css("width",d[2] "px").css("height",d[3] "px");
}
};
$(function () {
$("#divCut").draggable({ containment: 'parent' }).resizable({ containment: '#divContent' });
$("#btnCut").click(function () {
var y = $("#divCut").offset().top - $("#divContent").offset().top;
var x = $("#divCut").offset().top - $("#divContent").offset().top;
var width = $("#divCut").width();
var height = $("#divCut").height();
$.post("cutPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgSrc": d[1] }, function (data) {
$("#imgSrc").attr("src",data);
});
});
});
</script>
</head>
<body>
<form>
<div id="content">
<div id="swfu_container" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
<div id="divContent" style="width:300px;height:300px">
<div id="divCut" style="width:100px;height:100px;border:solid 1px red"></div>
</div>
</div>
</div>
<input type="button" value="截取头像" id="btnCut" />
<img id="imgSrc" />
</form>
</body>
</html>
方式二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>flash上传头像组件演示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="flash头像上传组件，仿新浪微博头像上传组件，头像图片剪裁" />
<meta name="Description" content="flash 上传头像，用户体验好，头像剪裁，预览组件" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #ffffff;}
#flashContent { width:100%; height:100%; }
</style>
<script type="text/javascript">
function uploadevent(status){
//alert(status);
status = '';
switch(status){
case '1':
var time = new Date().getTime();
//这里用于显示刚上传的图片，但图片地址是固定的，不是后天接收到的路径
document.getElementById('avatar_priview').innerHTML = "头像1 : <img src='1.png?" time "'/> <br/> 头像2: <img src='2.png?" time "'/><br/> 头像3: <img src='3.png?" time "'/>" ;
break;
break;
case '-1':
window.location.reload();
break;
default:
window.location.reload();
}
}
</script>
</head>
<body>
<div id="altContent">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="650" HEIGHT="450" id="myMovieName">
<!---这里修改flash路径-->
<PARAM NAME=movie VALUE="/Flash/avatar.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<!----./default.jpg修改默认图片路径，=./upfile.aspx修改后台执行页面的路径------------->
<param name="flashvars" value="imgUrl=/UploadImg/default.jpg&uploadUrl=upfile.ashx&uploadSrc=false&pSize=162|162|48|48|20|20" />
<!----./default.jpg修改默认图片路径，=./upfile.aspx修改后台执行页面的路径------------->
<!---这里修改flash路径-->
<EMBED src="/Flash/avatar.swf" quality=high bgcolor=#FFFFFF WIDTH="650" HEIGHT="450" wmode="transparent" flashVars="imgUrl=/UploadImg/default.jpg&uploadUrl=upfile.ashx&uploadSrc=false&pSize=162|162|48|48|20|20"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash" allowScriptAccess="always"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</div>
<!--这个div用于演示刚上传的图片，可以删除 --->
<div id="avatar_priview"></div>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论