内容简介：php使用jquery Form 实现页面无刷新上传图片，并预览图片
一、Jquery.form.js下载地址
Jquery.form.js下载地址
二、Jquery.form.js使用方法如下:
| 函数名 | 描述 | 参数 | 例子 |
|---|---|---|---|
| ajaxForm() | 增加所有需要的事件监听器，为ajax提交表单做准备。ajaxForm并不能提交表单。在document的ready函数中，使用ajaxForm来为ajax提交表单进行准备。 | 单进行准备。接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。 | $("#formid").ajaxForm(); |
| ajaxSubmit() | 使用ajax提交表单。 | 接受0个或1个参数。参数可以是一个回调函数，也可以是一个Options对象。 | $("#formid").ajaxSubmit(); |
| formSerialize() | 将表单串行化(或序列化)为一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 | 无 | $("#formid").formSerialize(); |
| fieldSerialize() | 将表单的字段元素串行化(或序列化)为一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，使用这个就很方便了。 返回以下格式的字符串：name=value1&name2=value2。 | 无 | $("#formid").formSerialize(); |
| fieldValue() | 返回匹配插入数组中的表单元素值。该方法以数组的形式返回数据。如果元素值被判定可能无效，则数组为空。 | 无 | $("#formid: password").fieldValue(); |
| resetForm() | 将表单恢复到初始状态。 | 无 | $("#formid").resetForm(); |
| clearForm() | 清除表单元素。该方法将所有的text、password、textarea置空，清除select元素中的选定，以及所有radio按钮和checkbox按钮重置为非选定状态。 | 无 | $("#formid").clearForm(); |
| clearFields() | 清除字段元素。只有部分表单元素需要清除时方便使用。 | 无 | $("#formid .speCIalFields").clearFields(); |
三、options对象参数：
| 参数 | 描述 | 默认值 |
|---|---|---|
| target | 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个 Jquery选择器字>符串、一个Jquery对象、一个DOM元素。 |
默认值：null |
| url | 指定提交表单数据的URL。 | 默认值：表单的action属性值 |
| type | 指定提交表单数据的方法(method)："GET"或"POST"。 | 默认值：GET |
| beforeSubmit | 表单提交前被调用的回调函数。如果回调函数返回false表单将不被提 交。回调函数带三个调用参数：数组形式的表单数据，Jquery表单对 象，以及传入ajaxForm/ajaxSubmit中的Options对象。 |
默认值：null |
| success | 表单成功提交后调用的回调函数。然后dataType选项值决定传回 responseText还是responseXML的值。 |
默认值：null |
| dataType | 返回的数据类型：null、"xml"、"script"、"json"其中之一。 | 默认值：null |
| resetForm | 表示如果表单提交成功是否进行重置。 | 默认值：null |
| clearForm | 表示如果表单提交成功是否清除表单数据。 | 默认值：null |
四、例子如下：
demo.HTML代码如下：
<!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ajax表单处理</title> </head> <body> 上传图片：<input type="file" name="banner" id="banner"/> 预览图片：<img src="" id="banner_see"> </body> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.form.js"></script> <script type="text/javascript"> $('#banner').on('change', function () { if ($("#mbanner").length > 0) { } else { $("#banner").wrap("<form id='mbanner' action='demo.php' method='post' xenctype='multipart/form-data'></form>"); } /*ajax提交*/ $("#mbanner").ajaxSubmit({ dataType: 'json', beforeSend: function () { }, uploadProgress: function (event, position, total, percentComplete) { }, success: function (data) { if (data.result == 'true') { $('#banner_see').attr('src',data.img); } else { $('#banner').val(""); } }, error: function (xhr) { } }); }); </script>
demo.PHP代码如下：
<?php if (file_exists("./" . $_FILES["banner"]["name"])) { $arrRet=array( 'result'=>'false' ); } else { $ret=move_uploaded_file($_FILES["banner"]["tmp_name"],"./" . $_FILES["banner"]["name"]); if($ret){ $arrRet=array( 'result'=>'true', 'img'=> $_FILES["banner"]["name"] ); }else{ $arrRet=array( 'result'=>'false' ); } } echo json_encode($arrRet); ?>
结果如下图：
以上所述就是小编给大家介绍的《php使用jquery Form 实现页面无刷新上传图片，并预览图片》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 少侠，留步，图片预览术
- JS图片压缩预览/下载
- 附件在线预览组件 WDA 1.2.6 发布，支持图片预览功能
- 造轮子之图片预览组件(preview)
- 仿写一个QQ空间图片预览Dialog
- HeyUI 1.5.0 版本更新，新增图片预览、抽屉组件
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Head First HTML and CSS
Elisabeth Robson、Eric Freeman / O'Reilly Media / 2012-9-8 / USD 39.99
Tired of reading HTML books that only make sense after you're an expert? Then it's about time you picked up Head First HTML and really learned HTML. You want to learn HTML so you can finally create th......一起来看看 《Head First HTML and CSS》 这本书的介绍吧!
