这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章

的一个收关。但是最初也是因为想做这么一个功能，一点一点的引发出了好多问题，不断去学习，研究，才写了这三篇。

早些时候已经实现了上传头像的功能，但是代码却是零零散散的，有html，有jQuery还有c#，所以就决定把这个功能独立出来，当个插件用会方便很多。而事实是在封装成插件的过程中，也学到了很多知识。

本文Demo下载地址：

------------------------------------------分割线------------------------------------------

具体下载目录在 /2014年资料/9月/10日/jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）

------------------------------------------分割线------------------------------------------

下面给大家看一下界面：

1、初始情况下

2、点击上传头像，弹出选择，预览浮动框

3、选择图片

4、确定后，符合要求，会提示成功，不符合要求，也会做出相应的提示

5、预览

6、确定上传

下面是部分代码

js部分：

$.fn.extend({

ShowTheFloatDiv: function (obj) {

$(this).click(function () {

$("body").find("*").not("div.float-outer").attr("disabled", "disabled");

var $float = jQuery.CreateTheFloatDiv();

$img_outer_obj = obj;

});

}

});

$.extend({

CreateTheFloatDiv: function () {

if ($(".float-outer").size() == 1) {

return $(".float-outer");

}

var left_offset = ($(window).width() - 600) / 2;//显示在浏览器窗口比较正的位置，看着比较舒服

var top_offset = ($(window).height() - 278) / 3;

var theFloatDivHtml = "

$("body").append(theFloatDivHtml);return $(".float-outer");

}

});

var $img_outer_obj;

$(function () {

//取消事件

$("body").delegate("#btn_cancel", "click", function () {

$(".float-outer").remove();

$("body").find("*").removeAttr("disabled");

});

//选择图片事件

$("body").delegate("#btn_selectfile", "click", function () {

$("#btn_upload").trigger(e);

});

var e = jQuery.Event("click");

$("body").delegate("#btn_upload", "click", function () {

}).delegate("#btn_upload", "change", function () {

var curPATH = getFilePath($(this).get(0));

var fileName = curPATH.substring(curPATH.lastIndexOf("\\") + 1);

var type = curPATH.substring(curPATH.lastIndexOf('.') + 1).toLowerCase();

if (type == "jpg" || type == "gif" || type == "bmp") {

$("input#tb_filename").val(fileName);

if ($("input#tb_filename").val() == "") {

alert("请先上传文件！");

return;

}

$.ajaxFileUpload

(

{

url: '/UploadPortrait.aspx', //用于文件上传的服务器端请求地址，需要根据实际情况进行修改

secureuri: false, //一般设置为false

fileElementId: $("input#btn_upload").attr("id"), //文件上传空间的id属性 //$("form").serialize(),表单序列化。指吧所有元素的ID，NAME 等全部发过去

dataType: 'json', //返回值类型 一般设置为json

complete: function () {//只要完成即执行，最后执行

},

success: function (data, status) //服务器成功响应处理函数

{

if (typeof (data.error) != 'undefined') {

if (data.error != '') {