zoukankan      html  css  js  c++  java
  • 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="317px;height:114px;max-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

  • 相关阅读:
    OneThink友情链接插件使用!
    OneThink生成分类树方法(list_to_tree)使用!
    OneThink视图模型进行组合查询!文档组合文档详情
    Atitit.数据操作dsl 的设计 ---linq 方案
    Atitit.数据操作dsl 的设计 ---linq 方案
    Atitit.Atiposter 发帖机 信息发布器 v7 q516
    Atitit.Atiposter 发帖机 信息发布器 v7 q516
    Atitit.http连接合并组件   ConnReducerV3 新特性
    Atitit.http连接合并组件   ConnReducerV3 新特性
    Atitit.减少http请求数方案
  • 原文地址:https://www.cnblogs.com/debmzhang/p/3996252.html
Copyright © 2011-2022 走看看