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

上一篇:怎样简单灵活地将DataTable中的数据赋值给model


下一篇:如何使用免费控件将Word表格中的数据导入到Excel中