swfupload无刷新上传图片实例教程
发布时间:2020-12-15 18:05:19 所属栏目:百科 来源:网络整理
导读:最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个html标签input id="File1" type="file" /或者asp.net封住好的FileUpload 控件,现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要
最近自己做项目的时候需要添加一个功能,上传用户的图片,上传用户图片其实涉及到很多东西,不只是一个html标签<input id="File1" type="file" />或者asp.net封住好的FileUpload 控件,现在网站不再讲究的是功能性,更多的是用户体验性,在这里上传图片就需要用到ajax无刷新上传图片,这里面包含的东西不是一点半点。这里用到的是一个插件swfupload 实现无刷新上传图片。直接上传我的代码供大家参考。 前台代码区: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ChangeAvatar.aspx.cs" Inherits="NovelChannel.ChangeAvatar" %> <!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 runat="server"> <title></title> <link href="/CSS/jQueryUI/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #draggable { width:50px; height:50px; padding:0.5em; } </style> <script src="/JS/jQuery/jquery-1.9.1.js" type="text/javascript"></script> <script src="/JS/jQuery/jquery-ui-1.10.2.custom.js" type="text/javascript"></script> <script type="text/javascript" src="/JS/swf/swfupload.js"></script> <script type="text/javascript" src="/JS/swf/handlers.js"></script> <script type="text/javascript"> function uploadImgSuccess(file,response) { //$("#imgAvatar").attr("src",response + "?ts=" + new Date()); //"url("+response + "?ts="+ new Date()+")") var strs = $.parseJSON(response); var imgPath = strs[0]; var imgWidth = strs[1]; var imgHeight = strs[2]; $("#avatarContainer").css("background-image","url(" + imgPath + ")"); $("#avatarContainer").css("width",imgWidth + "px").css("height",imgHeight+"px"); }; $(function () { var swfu; swfu = new SWFUpload({ // Backend Settings upload_url: "/Ajax/UploadAvatar.ashx",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,upload_success_handler: uploadImgSuccess,upload_complete_handler: uploadComplete,// Button settings button_image_url: "/JS/swf/images/XPButtonNoText_160x22.png",button_placeholder_id: "btnUploadImgPlaceholder",button_width: 160,button_height: 22,button_text: '<span class="button">选择图片(最大2MB)</span>',button_text_style: '.button { font-family: Helvetica,sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',button_text_top_padding: 1,button_text_left_padding: 5,// Flash Settings flash_url: "/JS/swf/swfupload.swf",// Relative to this file flash9_url: "/JS/swf/swfupload_FP9.swf",// Relative to this file custom_settings: { upload_target: "divFileProgressContainer" },// Debug Settings debug: false }); }); $(function () { $("#draggable").draggable({ containment: "parent" },{ cursor: "crosshair" }); $("#draggable").dblclick(function () { var thisOffset = $(this).offset();//获取改容器的坐标位置 var parentOffset = $(this).parent().offset(); //获取父容器的坐标位置 var left = thisOffset.left - parentOffset.left;//得到相对于父窗体的相对位置 var top = thisOffset.top - parentOffset.top; //得到相对于父窗体的相对位置 alert(left+" "+top); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <span id="btnUploadImgPlaceholder"></span> <div id="divFileProgressContainer"></div> <br /> <div id="avatarContainer" style="width:200px;height:300px"> <div id="draggable" style="background-color:transparent;border-width:1px;border-color:Black;border-style:solid;"> 拖过 </div> </div> <img id="imgAvatar" style="display:none;"/> </div> </form> </body> </html> 后台一般处理程序区: (UploadAvatar.ashx)
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO; using System.Drawing; using System.Web.Script.Serialization; using System.Drawing.Drawing2D; namespace NovelChannel.Ajax { /// <summary> /// UploadAvatar 的摘要说明 /// </summary> public class UploadAvatar : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //context.Response.Write("Hello World"); HttpPostedFile uploadFile = context.Request.Files["FileData"]; string ext = Path.GetExtension(uploadFile.FileName); if (ext != ".jpg") { context.Response.Write("非法的文件类型"); return; } string fileName = DateTime.Now.ToString("yyMMddhhMMss") + new Random().Next(1000,9999) +".jpg"; string filePath = "/Images/UserImg/" + fileName; string fullPath = HttpContext.Current.Server.MapPath("~" + filePath); uploadFile.SaveAs(fullPath); System.Drawing.Image img = Bitmap.FromFile(fullPath); string[] strs={filePath,img.Size.Width.ToString(),img.Size.Height.ToString()}; JavaScriptSerializer jss=new JavaScriptSerializer (); string json=jss.Serialize(strs); context.Response.Write(json); } public bool IsReusable { get { return false; } } } } 这样就可以实现无刷新上传图片的效果了。由于项目中包含一部分jQuery-UI的拖拽效果,如果对大家的项目没有什么帮助的话请适当删除。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |