- <link href="../Css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
- <link href="../Css/default.css" rel="stylesheet" type="text/css" />
- <Meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
- <script type="text/javascript" src="/SWFUpload/swfupload.js"></script>
- <script type="text/javascript" src="/SWFUpload/handlers.js"></script>
- <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
- <script src="../SWFUpload/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<Meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> : 这个是IE里面的兼容问题,如果说是IE7以上的版本浏览器会在搜索框后面,有一个像被破坏的图标,一点就会让浏览器兼容Flash 控件了。 其余的依次引入就可以了。
- <script type="text/javascript">
- var swfu;
- window.onload = function () {
- swfu = new SWFUpload({ //这个在Jquery文档中有这个方法
- // Backend Settings
//注意这是要请求的一般处理程序后面加了一个问号action=up。在后面会详细说到的
upload_url: "/ashx/CutHeaderPhoto.ashx?action=up",
post_params: {
- "ASPSESSID": "<%=Session.SessionID %>"
- },
- // File Upload Settings
- file_size_limit: "2 MB",//说上传的文件规定大小
- file_types: "*.jpg;*.gif",//上传文件的格式
- 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,
- upload_success_handler: ShowData,
- upload_complete_handler: uploadComplete,
- // Button settings
- button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png",
- button_placeholder_id: "spanButtonPlaceholder",
- button_width: 160,
- button_height: 22,
- button_text: '<span class="button">择上传的图片<span class="buttonSmall">(2MB 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: "/SWFUpload/swfupload.swf", // Relative to this file
- flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file
- custom_settings: {
- upload_target: "divFileProgressContainer"
- },
- // Debug Settings
- debug: false
- });
- }
- //处理图片上传和截取图片的一般处理程序,在前面说到了为什么要定义一个全局的 [var str] 当上传图片成功的
- //的时候会把图片存到磁盘上,可是当截取的时候还还要取出图片,当执行上传图片的时候,
string fileName = Path.GetFileName(file.FileName);这fileName为当前上传的图片, 当截取图片的时候,再一次执行这个一般处理程序fileName里面这时就为空了,所以取不到值。所以在前台前 定义一个变量来保存上传成功的图片,当执行图片截取的时候,fileName里面就有了上次成功传的图片了。 //取到文件的提交方式,是上传文件还是截取文件
- string action=context.Request["action"];//不明确是上传图片还截取图片
- //当这个action==up的时候说明是上传图片
- if (action == "up")
- {
- //创建一个单独访问文件的对象,FileData是Jquery封装好的
- HttpPostedFile file=context.Request.Files["Filedata"];
- //返回字符串file的路径和扩展名
- string fileName = Path.GetFileName(file.FileName);
- //得到这个字符串file的扩展名
- string fileExt = Path.GetExtension(fileName);
- //判断图片的后缀名
- if (fileExt == ".jpg")
- {
- //用Image来创建一个对象,用流的方式输出这个图片file.InputStream
- using (Image img = Image.FromStream(file.InputStream))
- {
- //得到图片的物理路径,把图片保存起来
- file.SaveAs(context.Server.MapPath("/UploadImages/"+fileName));
- //得到图片的大小
- context.Response.Write("ok:/UploadImages/"+fileName+":"+img.Width+":"+img.Height);
- }
- }
- //是cut就是说明是截取图片
- else if (action == "cut"){
- //来取到x,y,width,height
- 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))
- {
- //创建一个画笔,而且是在这Bitmap上面画的所以要用Graphics.FromImage(map)
- using (Graphics g = Graphics.FromImage(map))
- {
- //创建一个图片的对象,取到这个要在那里显示截取的图上
- using (Image img = Image.FromFile(context.Request.MapPath(imgSrc)))
- {
- //用这个画笔来取到这个要画的图片的大小和位置
- g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, GraphicsUnit.Pixel);
- //给截取的图片重新定义一个名字给存起来
- string newName = Guid.NewGuid().ToString().Substring(0,10);
- map.Save(context.Server.MapPath("/UploadImages/"+newName+".jpg"));
- context.Response.Write(context.Server.MapPath("/UploadImages/" + newName + ".jpg"));
- }
- }
- }
- }
- }
//定义一个全局的变量来接收服务器端传回的数据。 //上传图片
- var str;
- //参数为文件,有服务器端的数据
- function ShowData(file, serverData) {
- str = serverData.split(":"); //把这个数据从冒号截取
- if (str[0] == "ok") { //当这个 数据等于Ok的时候
- //在这个层里面显示图片内容,定义图片的宽和高
- $("#ImgContentId").css("backgroundImage", "url(" + str[1] + ")").css("width", str[2] + "px").css("height", str[3] + "px");
- }
- }
- //定义一个方法匿名方法 //这里是截取图片的位置大小,
- $(function () {
- //截取图片里面 要引用一个draggable和resizable这两个是Jquery定义好的
- $("#CutPhotoId").draggable({ containment: 'parent' }).resizable({ containment: 'parent' });
- //点击这个按钮就截取图片
- $("#btnCutPhotoId").click(function () {
- //取到这个截取图片层的x,y轴与宽和高
- var y = $("#CutPhotoId").offset().top - $("#ImgContentId").offset().top;
- var x = $("#CutPhotoId").offset().left - $("#ImgContentId").offset().left;
- var width = $("#CutPhotoId").width();
- var height = $("#CutPhotoId").height();
- //用Ajax的异步请求 post提交数据
- $.post("/ashx/CutHeaderPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), imgSrc=\'#\'" /span>function (data) {
- $("#imgSrcId").attr("src",data);
- });
- });
- });
- <form id="form1" runat="server"> //这是表单
- <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="ImgContentId" style="width: 300px; height: 300px">
- <div id="CutPhotoId" style="width: 100px; height: 100px; border: 1px solid red">
- </div>
- </div>
- <input type="button" value="截取头像" id="btnCutPhotoId" />
- <img id="imgSrcId" alt="美图"/>
- </div>
- </div>
- </form>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。