首页 > 代码库 > jquery ajax 提交表单(file && input)

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="http://www.mamicode.com/<?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="http://www.mamicode.com/提交" class="btn-guest" id="onlineservice_leave_message_submit">            </div>        </form>

js

<script type="text/javascript" charset="utf-8" src="http://www.mamicode.com/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

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