最近需要写一个上传文件后的ajax验证,找了半天用jquery的form插件结合ajax写了出来。看来jquery还是很强大的,以后的好好学习一下。
首先要引入jquery和form插件,注意顺序一定要先jquery,然后再form:
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.form.js"></script>
然后是一个form表单,上传文件的form表单:
<form id="form4" method="post" action="" enctype="multipart/form-data">
<input type="file" id="imageFile" onchange="checkImage()" />
</form>
最后是一个JS实现
<script type="text/javascript">
function checkImage()
{
$(document).ready(function(){
var options = {
url:"../servlet/checkImage",//后台的处理,也就是form里的action
type:"POST",
dataType:"script", //数据格式,有XML,html,json,默认为文本
success:function(msg){
//msg为接受后台的反馈信息。将他格式化为文本。也许我的代码的问题,后台返回的一直带有HTML标记的文本,所以我将他格式成文本。
var msgText = $("<div>"+msg+"</div>").text();
//下面可以根据后台反馈的信息做相应的处理
......
}
};
$("#form4").ajaxSubmit(options);
return false;//为了防止刷新
})
}
</script>
这里的options的success里接收后台反馈的信息,后台用
response.getWrite().write("msg");
这个方法来传递。
这个只是jquery的form插件里其中的一个办法,form插件功能很强大,我只用到了这一个方法,其他的就暂时不多说了。
分享到:
相关推荐
jQuery Form插件特别适用于处理文件上传。通过设置`dataType`为'iframe',可以实现跨域文件上传,并在`success`回调中处理返回结果。 **六、增强用户体验** 通过使用jQuery Form插件,可以添加进度条、禁用提交...
它与jQuery库紧密集成,提供了一套完整的解决方案来处理异步表单提交(如AJAX)、文件上传、以及实时表单验证。这个压缩包包含的是`jquery.form.js`的多个版本,供用户根据项目的兼容性和功能需求选择合适的版本使用...
总结,jQuery Form AJAX插件提供了方便的API,让表单的AJAX提交变得简单易用,无论是常规数据提交还是文件上传,都能轻松应对。在实际开发中,灵活运用其提供的配置选项,可以构建出高效、友好的用户交互体验。同时...
AjaxForm插件基于jQuery库,它监听表单的submit事件,当用户点击提交按钮时,不刷新整个页面,而是通过AJAX方式将表单数据发送到服务器。这样,用户可以继续在当前页面操作,而无需等待页面重载,提高了交互的流畅性...
在Web开发中,异步表单提交是一种常见需求,它能提供更好的用户体验,因为用户无需等待页面刷新即可完成数据的提交。...无论是在简单的数据提交还是复杂的文件上传场景,jQuery.form插件都能成为你的得力助手。
jQuery Form插件由Malsup开发,是一款非常实用的jQuery扩展,能够极大地简化表单的Ajax提交过程。它不仅提供了一套完整的API来管理表单数据,还支持复杂的表单验证与文件上传等功能。 ##### 2.1 主要特性 - **Ajax...
2. **jQuery插件**:例如`jQuery.form.js`或`jQuery.fileupload.js`,它们提供了方便的API来处理多文件上传。这些插件可以监听文件选择事件,创建FormData对象,将文件数据附加到对象中,并通过Ajax发送到服务器。 ...
`jQuery validate` 和 `jQuery form` 插件是 jQuery 生态系统中的两个重要工具,它们分别用于增强表单验证和实现 AJAX 无刷新提交,从而提供更流畅的用户体验。 **jQuery validate 插件** `jQuery validate` 是一...
jQuery Form插件,基于jQuery库,是用于处理HTML表单的增强工具,能够方便地实现异步提交、文件上传等功能,极大地简化了前端开发人员的工作。在这个主题中,我们将深入探讨jQuery Form的核心功能、使用方法以及常见...
总之,jQuery.form.js插件是开发中不可或缺的工具,它简化了表单处理,特别是异步文件上传的复杂性,让开发者能更专注于业务逻辑和用户体验设计。通过熟练掌握并运用这个插件,可以大大提高前端开发的效率和质量。
对于包含文件输入的表单,jQuery Form插件支持File API,允许进行异步文件上传。配合`iframe`或者`FormData`,可以实现跨域文件上传。 **7. 兼容性与最佳实践** 考虑到兼容性,确保你的项目支持最低版本的jQuery和...
本篇文章将深入探讨“jQuery插件:form表单验证”这一主题,包括其工作原理、如何调用以及实际应用。 表单验证是Web应用程序中的一个关键部分,确保用户输入的数据符合预设的规则,防止错误数据的提交。jQuery插件...
3. 多文件上传:在需要上传多张图片或文件的场景,如商品图片上传、个人资料修改,jQuery Form插件的文件上传和进度条功能非常实用。 4. 表单验证:在需要验证用户输入的场景,如问卷调查、报名表单,插件可以方便...
要使用这个插件,你需要在HTML文档中引入jQuery库和jQuery Form插件的脚本文件。然后,通过jQuery选择器找到要美化和处理的表单元素,并调用`.ajaxForm()`或`.ajaxSubmit()`方法进行配置。例如: ```html ...
`A Jquery Inline Form Validation` 是一个高质量的jQuery插件,专注于提供直观且高效的前端表单验证功能。这个插件通过在用户输入时即时显示错误信息,使得验证过程更加顺畅,减少了用户在提交表单后发现错误的情况...
AJAX验证 jQuery Validate插件支持通过AJAX进行远程验证。这允许我们在服务器端检查输入数据的合法性,而无需立即提交表单。以下是一个示例: ```javascript $("#myForm").validate({ rules: { fieldName: { ...
5. **jquery.form.js**:这是一个jQuery插件,扩展了jQuery的功能,使其可以方便地处理表单的Ajax提交,包括文件上传。它支持多文件上传、进度条显示等功能,使得文件上传更加便捷。 6. **action.php**:这是PHP...
这个插件支持多种提交方式,如文件上传,同时提供了丰富的回调函数和选项,以控制提交过程的每个阶段,如开始、成功和错误状态。 3. **jQuery Validate** jQuery Validate 是一个用于表单验证的插件,它为开发者...
插件的核心部分是`jquery.xu72.form.4.0.js`,这是实际的JavaScript代码文件,包含了所有验证功能的实现。开发者只需要在页面中引入这个脚本,并配置相应的验证规则,就能实现对表单的验证。这个版本4.0可能包含了新...
当前版本外调插件可以实现文件上传检测、密码强度检测和日期控件效果; 支持ajax提交表单数据,也支持ajax实时反馈验证结果(如常见的用户注册表单下的用户名检测); 支持开启网速慢时的二次提交防御(有时连续...