下载易到美团怎么上传头像像啊

爱拍网怎么上传头像啊_百度知道
爱拍网怎么上传头像啊
我下载玩家宝宝了 在设置里面找不到 就4个选项录像 拍照 热键 基础设置 根本没有个人信息设置
提问者采纳
更新以后下载来的玩家宝宝找不到,但是可以在个人空间网页里面看到,在自己的头像下面就有[头像设置]
提问者评价
其他类似问题
为您推荐:
其他2条回答
没有分部回答
最近有网友询问怎么修改爱拍头像,其实修改跟上传是一样的,下面我就把详细步骤告诉给大家。1 登录爱拍,会出现个人中心,我们找到头像区域。图中显示我们没有头像,需要点击修改头像。2 这个时候会弹出修改头像页面,我们点击选择文件,然后上传头像过程中会出现让你调整大小的选项。3
我们可以根据需要调整大小,或用鼠标拖动图片选择头像区域。点击上传。这样,我们就成功的更换了爱拍头像咯。
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁QQ空间POST上传头像易语言源码例程程序结合易语言数据操作支持库,调用易语言模块实现QQ空间POST上传头像。
&&& 点评:QQ空间POST上传头像易语言源码是易语言QQ应用例程。
下载地址 (请使用浏览器下载)
CopyRight & &版权所有&&&&上传头像(图片)到数据库并显示出来--asp
&上传头像(图片)到数据库并显示出来--asp
上传头像(图片)到数据库并显示出来,跟论坛上传头像一样,用asp编写,
若举报审核通过,可奖励20下载分
被举报人:
举报的资源分:
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题,侵犯个人或公司的版权
*详细原因:
您可能还需要
Q.为什么我点的下载下不了,但积分却被扣了
A. 由于下载人数众多,下载服务器做了并发的限制。若发现下载不了,请稍后再试,多次下载是不会重复扣分的。
Q.我的积分不多了,如何获取积分?
A. 获得积分,详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机,将获得5个C币,C币可。
关注并绑定CSDNID,送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意,不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台,并不能对任何下载资源负责
下载资源中如有侵权或不适当内容,
本站不保证本站提供的资源的准确性,安全性和完整性,同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
积分不够下载该资源
如何快速获得积分?
你下载资源过于频繁,请输入验证码
如何快速获得积分?
你已经下载过该资源,再次下载不需要扣除积分
上传头像(图片)到数据库并显示出来--asp
所需积分:2
剩余积分:0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员,免积分下载
会员到期时间:日
剩余下载次数:1000
VIP服务公告:今天写了一个微信公众平台上传头像,到下载到服务器,写了好久探讨一下
/************************
* 描述:微信公共脚本
* 作者:ngt
************************/
$(function () {
& & // 3. 通过config接口注入权限验证配置
& & wx.config({
& & & & debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
& & & & appId: commonJson.AppID, // 必填,公众号的唯一标识
& & & & timestamp: commonJson.TimeStamp, // 必填,生成签名的时间戳
& & & & nonceStr: commonJson.NonceStr, // 必填,生成签名的随机串
& & & & signature: commonJson.Signature, // 必填,签名,见附录1
& & & & jsApiList: [// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
& & & & "onMenuShareTimeline",
& & & & "onMenuShareAppMessage",
& & & & "onMenuShareQQ",
& & & & "onMenuShareWeibo",
& & & & "chooseImage",
& & & & "uploadImage",
& & & & "downloadImage",
& & & & "previewImage"
& & // 4. 通过ready接口处理成功验证
& & wx.ready(function () {
& & & & weixin.wxShareTimeline(); //微信分享到朋友圈
& & & & weixin.wxShareAppMessage(); //微信分享给朋友
& & & & weixin.wxShareWeibo(); //微信分享到微博
& & & & weixin.wxShareQQ(); //微信分享到QQ
& & // 5. 通过error接口处理失败验证
& & wx.error(function (res) {
& & & & //alert(JSON.stringify(res));
& & & & //alert("微信接口验证失败!查看是否配置url");
& & //获取头像
& & $("#imgTop").click(function () {
& & & & weixin.wxChooseImage(); //获取手机图片
& & //获取广告图片
& & $("#imgAdve").click(function () {
& & & & weixin.wxChooseGgImage(); //获取广告图片
& & $(".clickpic").click(function () {
& & & & var picurl = $(".clickpic").attr("data");
& & & & & //预览图片
& & & & & & wx.previewImage({
& & & & & & & & current: picurl, // 当前显示的图片链接
& & & & & & & & urls: urls // 需要预览的图片链接列表
& & & & & & });
var imgUrl = $("#shareImg").text(); //图片url
&var descContent = document. & &//描述内容
&var shareTitle = document. & & //标题
&var weixin = {
& & &localIds: "",
& & &serverId: "",
& & &//微信分享到朋友圈
& & &wxShareTimeline: function () {
& & & & &wx.onMenuShareTimeline({
& & & & & & &title: shareTitle, // 分享标题
& & & & & & &link: lineLink, // 分享链接
& & & & & & &imgUrl: imgUrl, // 分享图标
& & & & & & &success: function () {
& & & & & & & & &// 用户确认分享后执行的回调函数
& & & & & & &},
& & & & & & &cancel: function () {
& & & & & & & & &// 用户取消分享后执行的回调函数
& & & & & & &}
& & & & &});
& & &//微信分享给朋友
& & &wxShareAppMessage: function () {
& & & & &wx.onMenuShareAppMessage({
& & & & & & &title: shareTitle, // 分享标题
& & & & & & &desc: commonJson.sharelanguage, // 分享描述
& & & & & & &link: lineLink, // 分享链接
& & & & & & &imgUrl: imgUrl, // 分享图标
& & & & & & &type: '', // 分享类型,music、video或link,不填默认为link
& & & & & & &dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
& & & & & & &success: function () {
& & & & & & & & &// 用户确认分享后执行的回调函数
& & & & & & &},
& & & & & & &cancel: function () {
& & & & & & & & &// 用户取消分享后执行的回调函数
& & & & & & &}
& & & & &});
& & &//微信分享到微博
& & &wxShareWeibo: function () {
& & & & &wx.onMenuShareWeibo({
& & & & & & &title: shareTitle, // 分享标题
& & & & & & &desc: commonJson.sharelanguage, // 分享描述
& & & & & & &link: lineLink, // 分享链接
& & & & & & &imgUrl: imgUrl, // 分享图标
& & & & & & &success: function () {
& & & & & & & & &// 用户确认分享后执行的回调函数
& & & & & & &},
& & & & & & &cancel: function () {
& & & & & & & & &// 用户取消分享后执行的回调函数
& & & & & & &}
& & & & &});
& & &//微信分享到QQ
& & &wxShareQQ: function () {
& & & & &wx.onMenuShareQQ({
& & & & & & &title: shareTitle, // 分享标题
& & & & & & &desc: commonJson.sharelanguage, // 分享描述
& & & & & & &link: lineLink, // 分享链接
& & & & & & &imgUrl: imgUrl, // 分享图标
& & & & & & &success: function () {
& & & & & & & & &// 用户确认分享后执行的回调函数
& & & & & & &},
& & & & & & &cancel: function () {
& & & & & & & & &// 用户取消分享后执行的回调函数
& & & & & & &}
& & & & &});
& & &//获取手机图片
& & &wxChooseImage: function () {
& & & & &wx.chooseImage({
& & & & & & &success: function (res) {
& & & & & & & & &weixin.localIds = res.localI // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
& & & & & & & & &$("#imgTop").attr("src", weixin.localIds);
& & & & & & & & &weixin.wxUploadImge(0);
& & & & & & &}
& & & & &});
& & &//上传图片
& & &wxUploadImge: function (param) { &&
& & & & & & & wx.uploadImage({
& & & & & & & localId: weixin.localIds[0], // 需要上传的图片的本地ID,由chooseImage接口获得
& & & & & & &isShowProgressTips: 1, // 默认为1,显示进度提示
& & & & & & &success: function (res) {
& & & & & & & & &weixin.serverId = res.serverId; // 返回图片的服务器端ID
& & & & & & & &&
& & & & & & & & &weixin.wxDownImge(param);
& & & & & & &},
& & & & & & &fail: function (res) {
& & & & & & & & &alert("图片上传失败");
& & & & & & & & & &
& & & & & & &}
& & & & & & });
& & &//下载图片到我们服务器
& & &wxDownImge: function (param) {
& & & & &var strurl = "http://file.api./cgi-bin/media/get?access_token=" + commonJson.tonkey + "&media_id=" + weixin.serverId
& & & & &$.ajax({
& & & & & & &type: "POST",
& & & & & & &url: "/index.php?g=WShop&m=AjaxProduct&a=index",
& & & & & & &data: { "act": "uploadwximage", "access_token": commonJson.tonkey, "media_id": weixin.serverId },
& & & & & & &async: true,
& & & & & & &success: function (res) {
& & & & & & & & &res=$.parseJSON(res);
& & & & & & & & &if (res == 0) {
& & & & & & & & & & &alert("下载图片失败")
& & & & & & & & &} else {
& & & & & & & & & & &if (param == 0) {
& & & & & & & & & & & & &$("#imgTop").attr("src", res);
& & & & & & & & & & & & &$("#ImgeTop").val(res);
& & & & & & & & & & &} else {
& & & & & & & & & & & & &$("#imgAdve").attr("src", res);
& & & & & & & & & & & & &$("#ImgeAdve").val(res);
& & & & & & & & & & &}
& & & & & & & & &}
& & & & & & &}
& & & & &});
& & &//获取手机图片
& & &wxChooseGgImage: function () {
& & & & &wx.chooseImage({
& & & & & & &success: function (res) {
& & & & & & & & &weixin.localIds = res.localI // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
& & & & & & & & &$("#imgAdve").attr("src", weixin.localIds);
& & & & & & & & &weixin.wxUploadImge(1);
& & & & & & &}
& & & & &});
&$at=$_POST["access_token"];
& & & & $server_id=$_POST["media_id"];
& & & & $url="http://file.api./cgi-bin/media/get?access_token=".$at."&media_id=".$server_
& & & & $curl = curl_init($url);
& & & & curl_setopt($curl,CURLOPT_HEADER,0);
& & & & curl_setopt($curl,CURLOPT_NOBODY,0);
& & & & curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
& & & & $result = curl_exec($curl);
& & & & $httpInfo=curl_getinfo($curl);
& & & & curl_close($curl);
& & & &/* &if($result-&errcode == '40001'){
//出现invalid credential, access_token is invalid or not latest
//清空access_token,重新获取
//$isfirt =
$this-&_clearAccessToken();
$jsapi_ticket = $this-&uploadwximage();
& & & & }else{
LOG::write ( '获取jsapi_ticketObj发生错误:错误代码' . $jsapi_ticketObj-&errcode . ',微信返回错误信息:' . $jsapi_ticketObj-&errmsg );
& & & & } */
& & & & $imageAll=array_merge(array('header'=&$httpInfo),array('body'=&$result));
& & & & $dir = $_SERVER['DOCUMENT_ROOT']."/images/shop/".date("Y-m-d",time());
& & & & if(!is_dir($dir)){
mkdir($dir);
& & & & $name=time().rand().".jpg";
& & & & $filename=$dir."/".$
& & & & $local_file = fopen($filename, 'w');
& & & & if (false !== $local_file){
if (false !== fwrite($local_file, $imageAll['body'])) {
fclose($local_file);
& & & & $sr="/images/shop/".date("Y-m-d",time())."/".$
& & & & $src=trim($sr);///去掉首尾空格
& & & & $this-&ajaxReturn($src);
&&&&& & 如有错误:点击下面测试地址
&您阅读这篇文章共花了:&
捐赠支持:相关文章
本文作者: &&&&
文章标题:
本文地址:
版权声明:若无注明,本文皆为“国腾家庭”原创,转载请保留文章出处。
扫一扫微信二维码
微信号:qq扫一扫,手机观看!
当前访客身份:游客
欢迎到访天涯浪子的空间
类别:&&&&&&&发布于: 00:11
| 观看(3055) |
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合与技术为开发者提供了一个具有丰富功能继而超越传统&input type=&file& /&标签的文件上传模式。另一个Flash插件用起来比较简单,支持截图、本地摄像头拍照上传,但flash中有版权声明,不适合商业开发。这是官网地址:
关于SWFUpload的介绍,可以查看百度百科,博客园中也有SWFUpload2.5的中文翻译文档。
SWFUpload .Net安装包和官方Demo:
关于这两个插件的介绍,都可以通过以上网址了解,下面提供三个Demo介绍插件的使用。
一、swfupload实现上传:
网盘下载文件解压后,SWFUpload_v250_beta_3_samples\SWFUpload_v250_beta_3_samples\demos\applicationdemo.net路径中有一个Default.aspx文件。我们可以拷贝里面的代码,复制到我们新建的UploadImg.aspx文件中。
注意事项:
1、文件引用:
&script src=&../JS/handlers.js& type=&text/javascript&&&/script&
&script src=&../JS/jquery-1.8.2.js& type=&text/javascript&&&/script&
&script src=&../JS/swfupload.js& type=&text/javascript&&&/script&
将解压后整理好的swfuploadv250.Net开发包文件夹中的两个JS以及Jquery复制到项目中,注意引用路径
2、swfu=new SWFUpload{}中,我们需要修改upload_url(执行上传操作的一般处理程序或aspx),比如我修改为upload_url: &UploadImg.ashx&
3、修改flash插件的引用路径:
// Flash Settings
//在这里修改flash插件的引用路径
flash_url: &/Flash/swfupload.swf&, // Relative to this file
flash9_url: &/Flash/swfupload_FP9.swf&, // Relative to this file
4、上传成功后,我们希望通过得到后台返回的路径,显示刚上传的图片,添加一个ShowData方法,并将这个方法绑定到 upload_success_handler中。修改为upload_success_handler: ShowData,
//上传成功后执行,将img标签的src设置为返回的图片保存好的路径
& & & &function ShowData(file, serverData) {
& & & & & &$(&#imgSrc&).attr(&src&, serverData);
5、其他的一些关于图片类型限制大小限制怎么修改,可以查看官方文档
UploadImg.aspx
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml&&
4 & & &title&&/title&
5 & & &script src=&../JS/handlers.js& type=&text/javascript&&&/script&
6 & & &script src=&../JS/jquery-1.8.2.js& type=&text/javascript&&&/script&
7 & & &script src=&../JS/swfupload.js& type=&text/javascript&&&/script&
8 & & &script type=&text/javascript&&
10 & & & & window.onload = function () {
11 & & & & & & swfu = new SWFUpload({
12 & & & & & & & & // Backend Settings
13 & & & & & & & & //修改执行上传操作的文件(aspx或ashx)
14 & & & & & & & & upload_url: &UploadImg.ashx&,
15 & & & & & & & & post_params: {
16 & & & & & & & & & & &ASPSESSID&: &&%=Session.SessionID %&&
17 & & & & & & & & },
19 & & & & & & & & // File Upload Settings
20 & & & & & & & & file_size_limit: &2 MB&,
21 & & & & & & & & file_types: &*.jpg&,
22 & & & & & & & & file_types_description: &JPG Images&,
23 & & & & & & & & file_upload_limit: 0, & &// Zero means unlimited
25 & & & & & & & & // Event Handler Settings - these functions as defined in Handlers.js
26 & & & & & & & & // &The handlers are not part of SWFUpload but are part of my website and control how
27 & & & & & & & & // &my website reacts to the SWFUpload events.
28 & & & & & & & & swfupload_preload_handler: preLoad,
29 & & & & & & & & swfupload_load_failed_handler: loadFailed,
30 & & & & & & & & file_queue_error_handler: fileQueueError,
31 & & & & & & & & file_dialog_complete_handler: fileDialogComplete,
32 & & & & & & & & upload_progress_handler: uploadProgress,
33 & & & & & & & & upload_error_handler: uploadError,
34 & & & & & & & & //指定图片上传成功后执行的方法为我们自己定义的ShowData
35 & & & & & & & & upload_success_handler: ShowData,
36 & & & & & & & & upload_complete_handler: uploadComplete,
38 & & & & & & & & // Button settings
39 & & & & & & & & button_image_url: &images/XPButtonNoText_160x22.png&,
40 & & & & & & & & button_placeholder_id: &spanButtonPlaceholder&,
41 & & & & & & & & button_width: 160,
42 & & & & & & & & button_height: 22,
43 & & & & & & & & button_text: '&span class=&button&&Select Images &span class=&buttonSmall&&(2 MB Max)&/span&&/span&',
44 & & & & & & & & button_text_style: '.button { font-family: Helvetica, Arial, sans- font-size: 14 } .buttonSmall { font-size: 10 }',
45 & & & & & & & & button_text_top_padding: 1,
46 & & & & & & & & button_text_left_padding: 5,
48 & & & & & & & & // Flash Settings
49 & & & & & & & & //在这里修改flash插件的引用路径
50 & & & & & & & & flash_url: &/Flash/swfupload.swf&, // Relative to this file
51 & & & & & & & & flash9_url: &/Flash/swfupload_FP9.swf&, // Relative to this file
53 & & & & & & & & custom_settings: {
54 & & & & & & & & & & upload_target: &divFileProgressContainer&
55 & & & & & & & & },
57 & & & & & & & & // Debug Settings
58 & & & & & & & & debug: false
59 & & & & & & });
60 & & & & }
61 & & & & //上传成功后执行,将img标签的src设置为返回的图片保存好的路径
62 & & & & function ShowData(file, serverData) {
63 & & & & & & $(&#imgSrc&).attr(&src&, serverData);
64 & & & & };
65 & & &/script&
68 &/head&
70 & & &form&
71 & & & & &div id=&content&& & &
72 & & & & & & &div id=&swfu_container& style=&margin: 0px 10&&
73 & & & & & & & & &div&
74 & & & & & & & & & & &span id=&spanButtonPlaceholder&&&/span&
75 & & & & & & & & &/div&
76 & & & & & & & & &div id=&divFileProgressContainer& style=&height: 75&&&/div&
77 & & & & & & & & &div id=&thumbnails&&&/div&
78 & & & & & & &/div&
79 & & & & &/div&
80 & & & & &img id=&imgSrc& /&
82 & & &/form&
84 &/body&
85 &/html&
前台的工作已经完成,然后我们需要写一个后台,接收上传的图片,保存到文件夹中。这里我建的是一个一般处理程序UploadImg.ashx。
UploadImg.ashx
1 public void ProcessRequest(HttpContext context)
2 & & & & {
3 & & & & & & context.Response.ContentType = &text/plain&;
4 & & & & & & HttpPostedFile file = context.Request.Files[&Filedata&];//接受文件
5 & & & & & & string fileName = Path.GetFileName(file.FileName);//获取文件名
6 & & & & & & string fileExt = Path.GetExtension(fileName);//获取文件类型
7 & & & & & & if (fileExt.Equals(&.jpg&, StringComparison.InvariantCultureIgnoreCase))
8 & & & & & & {
9 & & & & & & & & //构建一个路径,网站根目录/UploadImg/年份/月/
10 & & & & & & & & string dircStr = &/UploadImg/& + DateTime.Now.Year + &/& + DateTime.Now.Month + &/&;
11 & & & & & & & & //在服务器的物理路径创建一个文件夹,不能写Path.GetDirectoryName(dircStr),这样获取到的是虚拟路径
12 & & & & & & & & Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dircStr)));
13 & & & & & & & & //为避免图片重名,使用guid重命名图片
14 & & & & & & & & string fileLoadName = dircStr + Guid.NewGuid().ToString() + fileE
15 & & & & & & & & //保存图片到服务器的物理路径
16 & & & & & & & & file.SaveAs(context.Server.MapPath(fileLoadName));
17 & & & & & & & & //响应报文返回路径名,已便于前台显示
18 & & & & & & & & context.Response.Write(fileLoadName);
19 & & & & & & & &
20 & & & & & & }
21 & & & & & &
22 & & & & }
这样子我们的前后台都完成了。总结一下实现思路:
前台:根据提供的demo,添加需要用到的JS、Flash,修改执行上传操作的文件路径、JS的引用路径、Flash的引用路径,添加上传成功后的方法(上传成功后执行,将img标签的src设置为返回的图片保存好的路径),
并绑定到upload_success_handler中。
后台:使用context.Request.Files[&Filedata&]接收文件,判断文件类型后,根据服务器物理路径创建一个文件夹,为避免重名,使用Guid重命名后,保存图片,并在响应报文中返回路径名。
二、我们刚才只是实现了简单的上传功能,下面我们用GDI+做一下截图功能。
1、在刚才的基础上,添加一个DIV divContent,将截图前图片设置为该DIV的背景。在该DIV中,添加一个小DIV divCut,
用于选择截图范围。
&div id=&divContent& style=&width:300height:300px&&
& & &&div id=&divCut& style=&width:100height:100border:solid 1px red&&&/div&
2、divContent的宽高是可以根据上传图片的大小动态确定的,而图片的宽高我们可以通过后台获取,获取后,在前台设置即可。
//保存上传成功图片的路径信息
& & & &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&);
& & & & & &}
2、我们希望小DIV能够移动并调整大小,方便我们选择截图范围,这时候我们可以使用JQueryUI来实现。JqueryUI的安装包请另行下载。
使用JqueryUI前,我们需要引入jquery.ui.all.css和jquery-ui-1.8.2.custom.min.js。
这里我们用到两个方法draggable移动层,resizable调整层大小。
代码只有一句:
$(&#divCut&).draggable({ containment: 'parent' }).resizable({ containment: '#divContent' });
3、这时候我们发现可以移动层和调整层大小了,但这并不是对图片做截图操作,我们希望根据divCut和divContent的位置,确定所选截取图片的位置,将这些信息返回到后台,通过GDI+截图。
这里我们可以在截图按钮事件中添加一个方法,异步将位置信息返回后台:
$(&#btnCut&).click(function () {
& & & & & & & &var y = $(&#divCut&).offset().top - $(&#divContent&).offset().
& & & & & & & &var x = $(&#divCut&).offset().top - $(&#divContent&).offset().
& & & & & & & &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);
& & & & & & & &});
& & & & & &});
4、这样前台的事情就做好了,下面我们看一下后台该怎么写:
后台cutPhoto.ashx需要处理两个工作,利用SWFUpload插件点击上传按钮时,地址栏参数action设为up,执行上传操作,并返回文件名、宽高,用于设置DivContent的大小和背景。
if (action == &up&)//表示上传
& & & & & &{
& & & & & & & &HttpPostedFile file = context.Request.Files[&Filedata&];//接收文件.
& & & & & & & &string fileName = Path.GetFileName(file.FileName);//获取文件名。
& & & & & & & &string fileExt = Path.GetExtension(fileName);//获取文件类型.
& & & & & & & &if (fileExt.Equals(&.jpg&,StringComparison.InvariantCultureIgnoreCase))
& & & & & & & &{
& & & & & & & & & &using (Image img = Image.FromStream(file.InputStream))//根据上传的文件创建一个Image.
& & & & & & & & & &{
& & & & & & & & & & & &file.SaveAs(context.Server.MapPath(&/UploadImg/& + fileName));
& & & & & & & & & & & &context.Response.Write(&ok:/UploadImg/& + fileName + &:& + img.Width + &:& + img.Height);
& & & & & & & & & &}
& & & & & & & &}
& & & & & &}
在点击截图按钮时,异步提交的地址参数action设为cut,执行图片截取操作,并返回图片路径
else if (action == &cut&)//头像截取
& & & & & &{
& & & & & & & &int x = Convert.ToInt32(context.Request.Form[&x&]);
& & & & & & & &int y = Convert.ToInt32(context.Request.Form[&y&]);
& & & & & & & &int width = Convert.ToInt32(context.Request.Form[&width&]);
& & & & & & & &int height = Convert.ToInt32(context.Request.Form[&height&]);
& & & & & & & &string imgSrc = context.Request.Form[&imgSrc&];//获取上传成功的图片路径
& & & & & & & &//根据传递过来的范围,将该范围的图片画到画布上,将画布保存。
& & & & & & & &using (Bitmap map = new Bitmap(width, height))
& & & & & & & &{
& & & & & & & & & &using (Graphics g = Graphics.FromImage(map))//为画布创建画笔.
& & & & & & & & & &{
& & & & & & & & & & & &using (Image img = Image.FromFile(context.Server.MapPath(imgSrc)))//创建img
& & & & & & & & & & & &{
& & & & & & & & & & & & & &//将图片画到画布上
& & & & & & & & & & & & & &//第一:对哪张图片进行操作
& & & & & & & & & & & & & &//二:画多么大
& & & & & & & & & & & & & &//三:画哪部分
& & & & & & & & & & & & & &g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
& & & & & & & & & & & & & &string newfile = Guid.NewGuid().ToString();
& & & & & & & & & & & & & &map.Save(context.Server.MapPath(&/UploadImg/& + newfile + &.jpg&));//将画布上的图片按照GUID命名保存
& & & & & & & & & & & & & &context.Response.Write(&/UploadImg/& + newfile + &.jpg&);
& & & & & & & & & & & &}
& & & & & & & & & &}
& & & & & & & &}
& & & & & &}
到此我们利用SWFUpload做头像截图上传就完成了。
三、SWFUpload自定义性很强,非常适合做上传操作,但有时候我们只也可以用一些做好的f更简单的falsh完成这一功能。
下面我们就用一个比较简单的插件,效果如下
学习一个插件,我们可以先熟悉它提供的Demo。
1、Demo中,avatar.swf是执行上传的flash文件,default.jpg是默认显示的图片,demo.html是demo,可以直接复制里面的代码,upfile.aspx是执行上传的后台文件,其实我们可以用一般处理程序代替,没必要写aspx,xml的实际作用不了解无需修改。
2、demo.html中,有两个层,altContent存放flash,里面的东西最好不要修改,我们只需修改里面引用flash的路径及默认图片,avatar_priview用于显示上传成功后的图片,可以删除。JS中uploadevent上传成功后执行,status表示响应报文值,返回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 + &'/&& ;
这段代码只是用于显示上传成功后的图片,可以删除。我修改后的demo.html.
1 &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
2 &html xmlns=&http://www.w3.org/1999/xhtml& lang=&en& xml:lang=&en&&
4 & &title&flash上传头像组件演示&/title&
5 & &meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
6 & &meta name=&Keywords& content=&flash头像上传组件,仿新浪微博头像上传组件,头像图片剪裁& /&
7 & &meta name=&Description& content=&flash 上传头像,用户体验好,头像剪裁,预览组件& /&
8 & &style type=&text/css& media=&screen&&
&html, body { height:100%; background-color: #ffffff;}10
&#flashContent { width:100%; height:100%; }11 & &/style&
13 & &script type=&text/javascript&&
14 & &function uploadevent(status){15 & & //alert(status);16
& & & &status += '';17 & & &switch(status){18 & & &case '1':19 & & & & &var time = new Date().getTime();20 & & & & //这里用于显示刚上传的图片,但图片地址是固定的,不是后天接收到的路径21
& & & &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 + &'/&& ;22 & & & &
23 & & break;24 & & &break;25 & & &case '-1':26
& & &window.location.reload();27 & & &break;28 & & &default:29
& & window.location.reload();30
& }32 & &/script&
33 &&/head&
34 &&body&
35 & &div id=&altContent&&
38 &OBJECT classid=&clsid:D27CDB6E-AE6D-11cf-96B8-&
39 codebase=&/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&
40 WIDTH=&650& HEIGHT=&450& id=&myMovieName&&
41 &!---这里修改flash路径--&
42 &PARAM NAME=movie VALUE=&/Flash/avatar.swf&&
43 &PARAM NAME=quality VALUE=high&
44 &PARAM NAME=bgcolor VALUE=#FFFFFF&
45 &!----./default.jpg修改默认图片路径,=./upfile.aspx修改后台执行页面的路径-------------&
46 &param name=&flashvars& value=&imgUrl=/UploadImg/default.jpg&uploadUrl=upfile.ashx&uploadSrc=false&pSize=162|162|48|48|20|20& /&
47 &!----./default.jpg修改默认图片路径,=./upfile.aspx修改后台执行页面的路径-------------&
48 &!---这里修改flash路径--&
49 &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&
50 NAME=&myMovieName& ALIGN=&& TYPE=&application/x-shockwave-flash& allowScriptAccess=&always&
51 PLUGINSPAGE=&/go/getflashplayer&&
52 &/EMBED&
53 &/OBJECT&
56 & &/div&
57 & &!--这个div用于演示刚上传的图片,可以删除 ---&
58 & &div id=&avatar_priview&&&/div&
60 &/body&
61 &/html&
我们大概了解了前台做了什么操作,下面我们看一下后台。
后台很简单,获取原图和修改大小后的三张图片:
String pic = Request.Form[&pic&];
String pic1 = Request.Form[&pic1&];
String pic2 = Request.Form[&pic2&];
String pic3 = Request.Form[&pic3&];
并通过File保存,当然,我们如果只需要一张图片,可以删除多余代码,也可以修改保存图片的地址。有了图片的地址,我们可以直接在这里将图片地址保存到数据库中。
这里要注意的是,返回响应报文
Response.Write(&{\&status\&:1}&);是不能修改的,如果改为其他值,比如图片路径,那么后台执行上传是可以成功的,但前台无法响应上传成功,不能弹出上传成功的框。
如果我们需要把后台处理后的路径返回前台,可以用Session或静态变量在后台保存值。
upfile.ashx
1 public void ProcessRequest(HttpContext context)
2 & & & & {
3 & & & & & & String pic = context.Request.Form[&pic&];
4 & & & & & & String pic1 = context.Request.Form[&pic1&];
5 & & & & & & String pic2 = context.Request.Form[&pic2&];
6 & & & & & & String pic3 = context.Request.Form[&pic3&];
8 & & & & & & //原图
9 & & & & & & if (pic.Length == 0)
10 & & & & & & {
11 & & & & & & }
12 & & & & & & else
13 & & & & & & {
14 & & & & & & & & byte[] bytes = Convert.FromBase64String(pic); &//将2进制编码转换为8位无符号整数数组
16 & & & & & & & & string url = &./src.png&;
17 & & & & & & & & FileStream fs = new FileStream(context.Server.MapPath(url), System.IO.FileMode.Create);
18 & & & & & & & & fs.Write(bytes, 0, bytes.Length);
19 & & & & & & & & fs.Close();
20 & & & & & & }
22 & & & & & & byte[] bytes1 = Convert.FromBase64String(pic1); &//将2进制编码转换为8位无符号整数数组.
23 & & & & & & byte[] bytes2 = Convert.FromBase64String(pic2); &//将2进制编码转换为8位无符号整数数组.
24 & & & & & & byte[] bytes3 = Convert.FromBase64String(pic3); &//将2进制编码转换为8位无符号整数数组.
28 & & & & & & //图1,
29 & & & & & & string url1 = &./1.png&;//需要修改图片保存地址,否则每次都是1.png,第二次会覆盖,为避免重名,可以使用guid:string fileLoadName =Guid.NewGuid().ToString() + &.png&;
30 & & & & & & FileStream fs1 = new FileStream(context.Server.MapPath(url1), System.IO.FileMode.Create);
31 & & & & & & fs1.Write(bytes1, 0, bytes1.Length);
32 & & & & & & fs1.Close();
34 & & & & & & //图2
35 & & & & & & string url2 = &./2.png&;
36 & & & & & & FileStream fs2 = new FileStream(context.Server.MapPath(url2), System.IO.FileMode.Create);
37 & & & & & & fs2.Write(bytes2, 0, bytes2.Length);
38 & & & & & & fs2.Close();
40 & & & & & & //图3
41 & & & & & & string url3 = &./3.png&;
42 & & & & & & FileStream fs3 = new FileStream(context.Server.MapPath(url3), System.IO.FileMode.Create);
43 & & & & & & fs3.Write(bytes3, 0, bytes3.Length);
44 & & & & & & fs3.Close();
45 & & & & & & //这里响应的是1,前台接收到json数组{status:1},如果返回图片地址,如改为context.Response.Write(&{\&status\&:&+url1+&}&);则前台页面无法执行uploadevent方法,只能按固定格式{\&status\&:1}。
46 & & & & & & //如果想返回图片路径,可以用静态类或session等方式。
47 & & & & & & context.Response.Write(&{\&status\&:1}&);
48 & & & & }
至此我们的截图上传功能就完成了。
邮箱(可选)}

我要回帖

更多关于 qq风尚怎么上传头像 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信