jquery ajax 提交表单(file && input)

用到的插件

jquery.js

jquery.form.js[http://malsup.github.io/jquery.form.js]

提交页面

        <form enctype="multipart/form-data" id="onlineservice_leave_message_form">
            <div class="cls">
                <label for="mail">
                <span class="require">*</span>电子邮箱</label>
                <input type="text" id="mail" name="mail" placeholder="建议留下您的QQ邮箱" value="<?php if(!Yii::app()->user->isGuest && Yii::app()->user->name){echo Yii::app()->user->name;}?>">
            </div>
            <div class="cls">
                <label for="qq">QQ号</label>
                <input type="text" id="qq" name="qq" placeholder="请输入QQ号码">
            </div>
            <div class="cls">
                <label for="tel">联系电话</label>
                <input type="text" id="tel" name="tel" placeholder="请输入联系电话">
            </div>
            <div class="cls">
                <label for="question">
                    <span class="require">*</span>问题描述</label>
                <textarea name="question" id="question" style="width:317px;height:114px;max-width:329px;"></textarea>
            </div>
            <div class="cls">
                <label for="file">添加附件</label>
                <input type="file" name="file" id="file">
            </div>
            <div class="checkcode cls">
                <label for="code">验证码</label>
                <input type="text" id="code" name="code">
                <?php
                $this->widget(‘CommonUrlCaptcha‘,array(
                    ‘showRefreshButton‘=>true,
                    ‘clickableImage‘=>true,
                    ‘buttonLabel‘=>‘换一张‘,
                    ‘imageOptions‘=>array(
                        ‘alt‘=>‘点击换图‘,
                        ‘title‘=>‘点击换图‘,
                        ‘id‘ => ‘img_captcha‘,
                        ‘style‘=>‘cursor:pointer‘,
                        ‘backColor‘=>‘#000‘,
                        ‘width‘ => 80,
                        ‘height‘ => 30,
                    )
                ));
                ?>
            </div>
            <div class="cls">
                <label for=""></label>
                <input type="button" value="提交" class="btn-guest" id="onlineservice_leave_message_submit">
            </div>
        </form>

js

<script type="text/javascript" charset="utf-8" src="/js/chat_version2/jquery.form.js"></script>
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
      var options={
          url:"onlineService/OnlineServiceLeaveMessage",
              type:"post",
              success:function(mes){
                  alert(mes);
              }
      };
      $("#onlineservice_leave_message_form").submit(function() {
          $(this).ajaxSubmit(options);
          return false;
      });

      $("#onlineservice_leave_message_submit").click(function(){
          $("#onlineservice_leave_message_form").submit();
      });
  });
</script>

jquery.form.js 主要方法说明, 参考

http://www.open-open.com/lib/view/open1325032463827.html