1、前端代码
4 | < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" > |
6 | < script type = "text/javascript" src = "js/jquery-1.7.2.min.js" ></ script > |
7 | < script type = "text/javascript" src = "js/jquery.form.min.js" ></ script > |
10 | < form id = "fileForm" method = "post" enctype = "multipart/form-data" action = "upload.php" > |
11 | 文件名称:< input name = "fileName" type = "text" >< br /> |
12 | 上传文件:< input name = "myfile" type = "file" >< br /> |
13 | < input id = "submitBtn" type = "submit" value = "提交" > |
15 | < script type = "text/javascript" > |
17 | $("#fileForm").ajaxForm({ |
18 | //定义返回JSON数据,还包括xml和script格式 |
20 | beforeSend: function() { |
23 | success: function(data) { |
2、后端PHP代码
2 | define( 'BASE_PATH' ,dirname( __FILE__ )); |
4 | move_uploaded_file( $_FILES [ 'myfile' ][ 'tmp_name' ],BASE_PATH.DIRECTORY_SEPARATOR. 'ufs' .DIRECTORY_SEPARATOR. $_FILES [ 'myfile' ][ 'name' ]); |
5 | $name = $_POST [ 'fileName' ]; |
7 | echo "{\"message\":\"上传成功!$name\"}" ; |
jquery.form插件是一个使用简单功能强大的表单异步上传插件,它提供了丰富的API和配置项来适应不同的需求。官方地址:http://jquery.malsup.com/form/。
1)、jquery.form可以包含的参数options
回调函数
- beforeSerialize在表单序列化之前调用,默认值是:null
1 | beforeSerialize: function ($form, options) { |
- beforeSubmit在表单提交之前调用,可以表单验证放到该函数中。默认值:null
1 | beforeSubmit: function (arr, $form, options) { |
- success 表单提交成功后的回调函数,函数包含的参数有,1: responseText 或responseXML 值,该值依赖与dataType属性的设置。2: statusText 返回状态文本。3: xhr或者是表单的jquery对象。4:表单的jquery对象。
- uploadProgress 上传进度更新时调用的函数。
属性设置
- clearForm Boolean值属性,表示是否在表单提交成功后情况表单数据
- dataType 提交成果后返回的数据格式,可选值包括xml,json或者script
- target 服务器返回信息去更新的页面对象,可以是jquery选择器字符串或者jquer对象或者DOM对象。
- type 提交类型可以是”GET“或者”POST“
- url 表单提交的路径
2)、使用ajaxForm
$(‘#myFormId’).ajaxForm(); 预处理表单提交。可以包含零个或一个参数,参数就是上面介绍的options。
3)、使用ajaxSubmit
调用后立即提交表单。也可以包含零个或者options参数。
1 | $( '#myFormId' ).submit( function () { |
4)、formSerialize 序列化表单,并返回一个查询字符串,格式为name1=value1&name2=value2。
1 | var queryString = $( '#myFormId' ).formSerialize(); |
4 | $.post( 'myscript.php' , queryString); |
5)、fieldSerialize 用于序列化表单的一部分,返回一个字符串,格式为name1=value1&name2=value2。
1 | var queryString = $( '#myFormId .specialFields' ).fieldSerialize(); |
6)、fieldValue 返回匹配表单的值,返回的是一个数组,如果没有匹配的值将返回空数组。
1 | var value = $( '#myFormId :password' ).fieldValue(); |
2 | alert( 'The password is: ' + value[0]); |
7)、resetForm 重置表单元素的值。
1 | $( '#myFormId' ).resetForm(); |
8)、clearForm 清空表单元素的值,将清空所以表单的值。
1 | $( '#myFormId' ).clearForm(); |
9)、clearFields 清空选定属性的值。
1 | $( '#myFormId .specialFields' ).clearFields(); |
更详细的请查看官方文档。