一、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代码如下：
01
02
03
04
05 ajax表单处理
06
07
08 上传图片：
09 预览图片：
10
11
12
13
14 $('#banner').on('change', function() {
15 if($("#mbanner").length > 0) {
16
17 } else{
18 $("#banner").wrap("");
19 }
20 /*ajax提交*/
21 $("#mbanner").ajaxSubmit({
22 dataType: 'json',
23 beforeSend: function() {
24
25 },
26 uploadProgress: function(event, position, total, percentComplete) {
27
28 },
29 success: function(data) {
30 if(data.result == 'true') {
31 $('#banner_see').attr('src',data.img);
32 } else{
33 $('#banner').val("");
34 }
35 },
36 error: function(xhr) {
37
38 }
39 });
40 });
41
demo.php代码如下：
01
02 if(file_exists("./". $_FILES["banner"]["name"]))
03 {
04 $arrRet=array(
05 'result'=>'false'
06 );
07
08 }
09 else
10 {
11 $ret=move_uploaded_file($_FILES["banner"]["tmp_name"],"./". $_FILES["banner"]["name"]);
12 if($ret){
13 $arrRet=array(
14 'result'=>'true',
15 'img'=> $_FILES["banner"]["name"]
16 );
17 }else{
18 $arrRet=array(
19 'result'=>'false'
20 );
21 }
22 }
23 echojson_encode($arrRet);
24?>
结果如下图：
本文标题: php使用jquery Form 实现页面无刷新上传图片，并预览图片
固定链接: http://www.tcode.me/article/749.html 来自淘代码转载请注明