jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）

这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章《ASP.NET 使用js插件出现上传较大文件失败的解决方法（ajaxfileupload.js第一弹》 http://www.linuxidc.com/Linux/2014-09/106413.htmjQuery 关于ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二弹） http://www.linuxidc.com/Linux/2014-09/106413.htm的一个收关。但是最初也是因为想做这么一个功能，一点一点的引发出了好多问题，不断去学习，研究，才写了这三篇。早些时候已经实现了上传头像的功能，但是代码却是零零散散的，有html，有jQuery还有c#，所以就决定把这个功能独立出来，当个插件用会方便很多。而事实是在封装成插件的过程中，也学到了很多知识。本文Demo下载地址：------------------------------------------分割线------------------------------------------免费下载地址在 http://linux.linuxidc.com/用户名与密码都是www.linuxidc.com具体下载目录在 /2014年资料/9月/10日/jQuery 自制上传头像插件-附带Demo实例（ajaxfileupload.js第三弹）下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm------------------------------------------分割线------------------------------------------下面给大家看一下界面：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; }） }）}）; 更多详情见请继续阅读下一页的精彩内容： http://www.linuxidc.com/Linux/2014-09/106414p2.htm