最近自己做项目的时候需要添加一个功能，上传用户的图片，上传用户图片其实涉及到很多东西，不只是一个html标签或者asp.net封住好的FileUpload 控件，现在网站不再讲究的是功能性，更多的是用户体验性，在这里上传图片就需要用到ajax无刷新上传图片，这里面包含的东西不是一点半点。这里用到的是一个插件swfupload 实现无刷新上传图片。直接上传我的代码供大家参考。

前台代码区：

#draggable

{

width:50px;

height:50px;

padding:0.5em;

}

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": ""

},

// 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: '选择图片(最大2MB)',

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);

});

});

后台一般处理程序区：

(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

{

///

/// UploadAvatar 的摘要说明

///

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