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

　　这个微社区项目的前端主要用到了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;
                    }
                });