微社区项目开发笔记(前端篇)

　　这个微社区项目的前端主要用到了JQuery和AJAX技术。用到的插件有jquery.form(表单静态提交)、jquery.qqFace(QQ表情)、pickadate(日期选择)。(在此，我对各个插件的开发者表示由衷的感谢！)

　　各个插件的使用方法就不详细介绍了，想要了解的可以在网络上搜索。

　　这里主要介绍一下图片上传的方法：

　　　　众所周知，html表单里面提供了上传文件的控件:

　　　　　　<input type="file"/>　　

　　　　但是，在追求交互效果的今天，这样的表现方式显然是不好的。所以我们可以“挂羊头卖狗肉”，利用file控件的功能，和其它div的外观实现美观的文件上传。

　　　　具体的实现方式是创建file控件并隐藏，然后用其它控件的单击事件绑定file的点击事件。具体的绑定方式如下：

　　　　

<form id="upImg" action="" method="post" enctype="multipart/form-data">
<input class="upFile" type="file" name="uploadFile" accept="image/*" style="display:none"/>
</form>
<div><span class = "clp" onclick = "clp();">更换头像</span></div>

<script type="text/javascript">
function clp()
{
return $(".upFile").click();
}
</script>

　　　　这样就可以实现美观的文件上传。

　　　　当然，这样做只实现了文件的选择，想要优雅的上传文件，可以为file控件绑定onchange()事件

　　　　

<form id="upImg" action="" method="post" enctype="multipart/form-data">
<input class="upFile" type="file" name="uploadFile" accept="image/*" onchange="getForm();" style="display:none"/>
</form>
<div><span class = "clp" onclick = "clp();">更换头像</span></div>

<script type="text/javascript">
function clp()
{
return $(".upFile").click();
}
function getForm()
{

$("#upImg").ajaxSubmit(function(message){
//表单提交成功后的处理

});
}

</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;
}
});