这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章
《ASP.NET 使用js插件出现上传较大文件失败的解决方法（ajaxfileupload.js第一弹》
jQuery 关于ajaxfileupload.js插件的逐步解析（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 = "<div>";
theFloatDivHtml += "<div>上传头像</div>";
theFloatDivHtml += "<div>";
theFloatDivHtml += "<div>文件名:";
theFloatDivHtml += "<input type='text' readonly /> ";
theFloatDivHtml += "<input type='button' value='选择图片' />";
theFloatDivHtml += "<input type='file' accept='.jpg,.bmp,.gif' />";
theFloatDivHtml += "</div>";
theFloatDivHtml += "<div>";
theFloatDivHtml += "<span>图片预览:";
theFloatDivHtml += "<div>";
theFloatDivHtml += "<img src='' alt=''/>";
theFloatDivHtml += "<span>60*60";
theFloatDivHtml += "</div>";
theFloatDivHtml += "<div>";
theFloatDivHtml += "<img src='' alt=''/>";
theFloatDivHtml += "<span>120*120";
theFloatDivHtml += "</div>";
theFloatDivHtml += "</div>";
theFloatDivHtml += "</div>";
theFloatDivHtml += "<div>";
theFloatDivHtml += "<input type='submit' value='确定' />";
theFloatDivHtml += "<input type='button' value='取消' />";
theFloatDivHtml += "</div>";
theFloatDivHtml += "</div>";
$("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