swfupload ajax无刷新上传图片实例代码

　　最近自己做项目的时候需要添加一个功能，上传用户的图片，上传用户图片其实涉及到很多东西，不只是一个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">

　　#draggable

　　{

　　width:50px;

　　height:50px;

　　padding:0.5em;

　　}

　　</style>

　　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, Arial, 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>

　　<div>

　　<br />

　　拖过

　　</div>

　　</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的拖拽效果，如果对大家的项目没有什么帮助的话请适当删除。

教程首页更多教程