ajax提交表单文件，判断文件大小，类型，PHP后台

您好，第一步，创建一个表单HTML页面

这里，我们只展示主要的表单部分HTML结构代码：

复制代码代码如下:

<div id="contact_form">

<form name="contact" method="post" action="">

<fieldset>

<label for="name" id="name_label">姓名</label>

<input type="text" name="name" id="name" size="30" value="" class="text-input" />

<label class="error" for="name" id="name_error">此项必填</label>

<label for="email" id="email_label">您的Email</label>

<input type="text" name="email" id="email" size="30" value="" class="text-input" />

<label class="error" for="email" id="email_error">此项必填</label>

<label for="phone" id="phone_label">您的联系电话</label>

<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />

<label class="error" for="phone" id="phone_error">此项必填</label>

<br />

<input type="submit" name="submit" class="button" id="submit_btn" value="我要发送" />

</fieldset>

</form>

</div>

几点注意：

这里用一个id为contact_form来包含整个包含信息；这是有意义的，稍后在JavaScript与用户交互信息的时候会用到。

大家应该注意到了，这里form标签的属性里面既包含了method和action；这个意义其实不大，因为Javascript直接 *** 作DOM，所以没有这两个属性也是可以的；

务必要给用户输入的<input>标签加独立的id，这和第二点原理类似。否则，无法看到正常的效果。

第二步，开始添加JQuery代码

这里假设你已经从JQuery官方网站上下载了JQuery基库，然后上传到了你的WEB服务器，并添加到你要使用的网页中了。

现在另外新建一个JS文件，添加如下代码：

复制代码代码如下:

$(function() {

$(".button").click(function() {

// 处理表单验证和交给后台处理的逻辑

})

})

第一行的function()函数与Jquery的document.ready函数用法和功能相同，都是在DOM准备完毕后自动触发。

第二行里面是一个单击触发函数click()，需要注意的是，在HTML一页提交按钮上需要放置一个名为“button”的Class，以模拟实现submi提交表单的功能.

从第二点我们可以看出，JQuery可以很好的将结构和逻辑分离。

第三步，编写验证代码

在实际应用中，这一步是必不可少的。在用户漏填，错填某个项目时，及时提示。

复制代码代码如下:

$(function() {

$('.error').hide()

$(".button").click(function() {

// 验证代码

$('.error').hide()

var name = $("input#name").val()

if (name == "") {

$("label#name_error").show()

$("input#name").focus()

return false

}

var email = $("input#email").val()

if (email == "") {

$("label#email_error").show()

$("input#email").focus()

return false

}

var phone = $("input#phone").val()

if (phone == "") {

$("label#phone_error").show()

$("input#phone").focus()

return false

}

})

})

几点注意：

第2行，我们添加一个$('.error').hide()是为了在用户未输入任何信息时隐藏三个class="error"提示错误的label标签。而只有当出现错误，即为空时，错误才会出现。（因为有return false的作用，每次仅会出现一个错误）

在JQuery里面，获取DOM中某个ID或者Class的值非常简单

复制代码代码如下:

//获取id的值

var name = $("input#name").val()

//获取class序号为1的值

var name = $(".name")[1].val()

现假设用户没有输入姓名，处理逻辑应该是：首先显示错误，然后将焦点定位在姓名上。

if (name == "") { //用户名为空

$("label#name_error").show()//错误提示

$("input#name").focus()//焦点定位

return false//返回

}

在必填的字段上验证时，都必须return false，否则会出现必填项未填完即提交的情况。

第四步，通过Jquery的Ajax函数提交表单信息。

这是本教程实现无刷新提交的核心步骤，通过ajax函数来递交javascript从DOM中获取的表单项值，然后异步提交给后台处理程序（process.php），并发送Email。此步紧接在验证程序之后：

复制代码代码如下:

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone

//alert (dataString)return false

$.ajax({

type: "POST",

url: "bin/process.php",

data: dataString,

success: function() {

$('#contact_form').html("<div id='message'></div>")

$('#message').html("<h2>联系方式已成功提交！</h2>")

.append("<p>Script by Code52.net</p>")

.hide()

.fadeIn(1500, function() {

$('#message').append("<img id='checkmark' src='images/check.png' />")

})

}

})

return false

以上代码的核心函数是.ajax() ，它所起得作用就是使用POST方式将已经获取的表单信息(dataString)异步传送给所定义的后台PHP url(bin/process.php)。如果数据成功传送，它会将一系列我们定义好的信息返回给用户。最后return false，这样是为了防止页面重新加载。

除了返回成功信息和发送邮件外，我们还可以做其他一些更广泛的事情。比如，将获得的数据交由后台脚本处理时，将数据插入数据库中，然后再将用户提交的信息返回。

详细解释：

首先，获取表单项的值，方法我们已经在第三步中提到过了：

var name = $("input#name").val()

var email = $("input#email").val()

var phone = $("input#phone").val()

//将表单项的值组合成一个字符串

var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone

将此组合字符串的值通过AJAX函数传递给后台url，如果成功，则会返回成功信息给用户：

复制代码代码如下:

$.ajax({

type: "POST",

url: "bin/process.php",

data: dataString,

success: function() {

$('#contact_form').html("<div id='message'></div>")

$('#message').html("<h2>Contact Form Submitted!</h2>")

.append("<p>We will be in touch soon.</p>")

.hide()

.fadeIn(1500, function() {

$('#message').append("<img id='checkmark' src='images/check.png' />")

})

}

})

return false

在本示例中，ajax函数的功能就只有这些了，如果你需要进一步关于ajax函数的信息，可以参考官方文档：jQuery's documentation on the ajax function

第五步，反馈信息给用户的部分

首先，在信息提交成功之后，JQuery会通过以下部分动态的替换掉<div id="contact_form"></form>中的内容，只需要简单的一句话即可实现。

$('#contact_form').html("<div id='message'></div>")

所以请大家记住，如果你以后需要通过JavaScript动态的替换掉某个层或者<span>，可以使用Jquery的.html方法实现，非常简单和方便。

其次，有了这个层肯定还不够，因为里面还没有内容，所以，我们还要给id=message的这个层添加一些显示内容：

$('#message').html("<h2>联系方式已成功提交！</h2>")

同样是动态的为id为message的层添加了一段html用于提示。还可以利用append方法在message层中追加一句：

.append("<p>We will be in touch soon.</p>")

最后，为了表现出提交之后，服务器处理的动态效果，我们设置了以下特效代码：

.hide() //整个层消失

.fadeIn(1500, function() {//在1500毫秒内逐渐出现

//最后再动态追加一个成功图标

$('#message').append("<img id='checkmark' src='images/check.png' />")

})

DiskFileUpload fu = new DiskFileUpload()

// 设置最大文件尺寸，这里是4MB

fu.setSizeMax(4194304)

// 设置缓冲区大小，这里是4kb

fu.setSizeThreshold(4096)

网上摘得，楼主可以看看fileupload的api，网上有的吧。

首先我们在页面上放置个上传按钮，使用POST提交到ajax.php。#ul_pics 用来显示上传完毕后的图片。

<a class="btn" id="btn">上传图片</a>最大500KB，支持jpg，gif，png格式。

<ul id="ul_pics" class="ul_pics clearfix"></ul>

接着，加载jQuery.js和plupload.full.min.js插件。

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="plupload/plupload.full.min.js"></script>

当点击按钮“上传图片”后，d出选择文件对话框，按 "ctrl" 选择多图片上传。然后调用 uploader.start() 方法，开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度，最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台，会发现上传一张图片，会向后台ajax.php请求一次。

var uploader = new plupload.Uploader({ //创建实例的构造方法

runtimes: 'html5,flash,silverlight,html4',

//上传插件初始化选用那种方式的优先级顺序

browse_button: 'btn',

// 上传按钮

url: "ajax.php",

//远程上传地址

flash_swf_url: 'plupload/Moxie.swf',

//flash文件地址

silverlight_xap_url: 'plupload/Moxie.xap',

//silverlight文件地址

filters: {

max_file_size: '500kb',

//最大上传文件大小（格式100b, 10kb, 10mb, 1gb）

mime_types: [ //允许文件上传类型

{

title: "files",

extensions: "jpg,png,gif"

}]

},

multi_selection: true,

//true:ctrl多文件上传, false 单文件上传

init: {

FilesAdded: function(up, files) { //文件上传前

if ($("#ul_pics").children("li").length >30) {

alert("您上传的图片太多了！")

uploader.destroy()

} else {

var li = ''

plupload.each(files,

function(file) { //遍历文件

li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>"

})

$("#ul_pics").append(li)

uploader.start()

}

},

UploadProgress: function(up, file) { //上传中，显示进度条

$("#" + file.id).find('.bar').css({

"width": file.percent + "%"

}).find(".percent").text(file.percent + "%")

},

FileUploaded: function(up, file, info) { //文件上传成功的时候触发

var data = JSON.parse(info.response)

$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/></div><p>" + data.name + "</p>")

},

Error: function(up, err) { //上传出错的时候触发

alert(err.message)

}

}

})

uploader.init()

---