jQuery 自制上传头像插件-附带Demo实例（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 class='float-outer' style='left:" + left_offset + "px;top:" + top_offset + "px;'>";
theFloatDivHtml += "<div class='float-header float-border'>上传头像</div>";
theFloatDivHtml += "<div class='float-content'>";
theFloatDivHtml += "<div class='content-first-row'>文件名:";
theFloatDivHtml += "<input type='text' id='tb_filename' style=';' readonly /> ";
theFloatDivHtml += "<input type='button' id='btn_selectfile' value='选择图片' style='margin-left:-10px;' />";
theFloatDivHtml += "<input type='file' id='btn_upload' name='btn_upload' style='display:none;' accept='.jpg,.bmp,.gif' />";
theFloatDivHtml += "</div>";
theFloatDivHtml += "<div class='content-second-row'>";
theFloatDivHtml += "<span class='img-portrait' style=';'>图片预览:";
theFloatDivHtml += "<div class='img-portrait' style='padding-top:30px;'>";
theFloatDivHtml += "<img src='' class='preview60' alt=''/>";
theFloatDivHtml += "<span>60*60";
theFloatDivHtml += "</div>";
theFloatDivHtml += "<div style='float:left;'>";
theFloatDivHtml += "<img src='' class='preview120' alt=''/>";
theFloatDivHtml += "<span>120*120";
theFloatDivHtml += "</div>";
theFloatDivHtml += "</div>";
theFloatDivHtml += "</div>";
theFloatDivHtml += "<div class='float-footer float-border'>";
theFloatDivHtml += "<input type='submit' value='确定' id='btn_ok' />";
theFloatDivHtml += "<input type='button' value='取消' id='btn_cancel' />";
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
fileElementId: $("input#btn_upload").attr("id"), //文件上传空间的id属性 <input type="file" id="file" name="file" /> //$("form").serialize(),表单序列化。指吧所有元素的ID，NAME 等全部发过去
dataType: 'json', //返回值类型 一般设置为json
complete: function () {//只要完成即执行，最后执行
},
success: function (data, status) //服务器成功响应处理函数
{
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
if (data.error == "1001") {
}
else if (data.error == "1002") {
$("input#tb_filename").val("");
$(".preview60").attr("src", "");
$(".preview120").attr("src", "");
}
alert(data.msg);
return;
} else {
alert(data.msg);
}
}
$(".preview60").attr("src", data.imgurl);
$(".preview120").attr("src", data.imgurl);
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
else {
alert("请选择正确的图片格式(.jpg|.gif|.bmp)");
}
});
$("body").delegate("#btn_ok", "click", function () {
$img_outer_obj.attr("src", $(".preview120").attr("src"));
$(".float-outer").remove();
$("body").find("*").removeAttr("disabled");
});
//移动浮动框
var offset_left, offset_top, moveFlag;
$("body").delegate(".float-header", "mousedown", function (e) {
moveFlag = true;
offset_left = e.pageX - $(this).offset().left;
offset_top = e.pageY - $(this).offset().top;
$("body").delegate(".float-header", "mousemove", function (e) {
if (moveFlag) {
$(".float-outer").css("left", e.pageX - offset_left + "px").css("top", e.pageY - offset_top + "px");
}
}).delegate(".float-header", "mouseup", function () {
moveFlag = false;
})
})
});