标签：
这个微社区项目的前端主要用到了JQuery和AJAX技术。用到的插件有jquery.form(表单静态提交)、jquery.qqFace(QQ表情)、pickadate(日期选择)。(在此，我对各个插件的开发者表示由衷的感谢！)
各个插件的使用方法就不详细介绍了，想要了解的可以在网络上搜索。
这里主要介绍一下图片上传的方法：
众所周知，html表单里面提供了上传文件的控件:
<input type="file"/>
但是，在追求交互效果的今天，这样的表现方式显然是不好的。所以我们可以“挂羊头卖狗肉”，利用file控件的功能，和其它div的外观实现美观的文件上传。
具体的实现方式是创建file控件并隐藏，然后用其它控件的单击事件绑定file的点击事件。具体的绑定方式如下：
1 <form id="upImg" action="" method="post" enctype="multipart/form-data"> 2 <input class="upFile" type="file" name="uploadFile" accept="image/*" style="display:none"/> 3 </form> 4 <div><span class = "clp" onclick = "clp();">更换头像</span></div> 5 6 <script type="text/javascript"> 7 function clp() 8 { 9 return $(".upFile").click(); 10 } 11 </script>
这样就可以实现美观的文件上传。
当然，这样做只实现了文件的选择，想要优雅的上传文件，可以为file控件绑定onchange()事件
1 <form id="upImg" action="" method="post" enctype="multipart/form-data"> 2 <input class="upFile" type="file" name="uploadFile" accept="image/*" onchange="getForm();" style="display:none"/> 3 </form> 4 <div><span class = "clp" onclick = "clp();">更换头像</span></div> 5 6 <script type="text/javascript"> 7 function clp() 8 { 9 return $(".upFile").click(); 10 } 11 function getForm() 12 { 13 14 $("#upImg").ajaxSubmit(function(message){ 15 //表单提交成功后的处理 16 17 }); 18 } 19 20 </script>
要注意的是，使用ajaxSubmit提交表单必须导入jquery.form插件，当部分高版本jquery和jquery.form不兼容显示$.handleError is not a function的时候还需加入以下代码
//解决jquery.form插件上传图片时$.handleError is not a function的问题 jQuery.extend({ handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s, xhr, status, e); } if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } }, httpData: function (xhr, type, s) { var ct = xhr.getResponseHeader("content-type"), xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0, data = xml ? xhr.responseXML : xhr.responseText; if (xml && data.documentElement.tagName == "parsererror") throw "parsererror"; if (s && s.dataFilter) data = s.dataFilter(data, type); if (typeof data === "string") { if (type == "script") jQuery.globalEval(data); if (type == "json") data = window["eval"]("(" + data + ")"); } return data; } });
标签：
原文地址：http://www.cnblogs.com/hyhk-jiy/p/5012181.html
