在PHP网站开发中，文件上传功能时常用到，之前我已介绍过如何利用PHP实现文件上传功能。随着WEB技术的发展，用户体验成为衡量网站成功与否的关键，今天和大家分享如何在PHP中利用Jquery实现Ajax方式文件上传功能的例子，其中使用到了Jquery插件Ajaxupload，其可以实现单个文件和多文件上传功能。
AjaxUpload
Jquery插件AjaxUpload实现文件上传功能时无需创建form表单，即可实现Ajax方式的文件上传，当然根据需要也可以创建form表单。
准备工作
1、下载Jquery开发包和文件上传插件AjaxUpload。
2、创建uploadfile.html，并引入Jquery开发包和AjaxUpload插件
<script src="js/jquery-1.3.js"></script> <script src="js/ajaxupload.3.5.js"></script>
3、根据Jquery插件AjaxUpload的需要，创建一个触发Ajax文件上传功能的DIV
<ul> <li id="example"> <div id="upload_button">文件上传</div> <p>已上传的文件列表:</p> <ol class="files"></ol> </ul>
注释 ：由下面的 代码 我们可以看到Jquery插件AjaxUpload是根据upload_button这个DIV触发文件上传功能。
前台JS代码
在代码中我设置了开关，根据需要可以匹配上传文件类型，同时也可以设置是以Ajax方式实现单个文件上传还是多个文件上传。
$(document).ready(function(){ var button = $('#upload_button'), interval; var fileType = "all",fileNum = "one"; new AjaxUpload(button,{ action: 'do/uploadfile.php', /*data:{ 'buttoninfo':button.text() },*/ name: 'userfile', onSubmit : function(file, ext){ if(fileType == "pic") { if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){ this.setData({ 'info': '文件类型为图片' }); } else { $('<li></li>').appendTo('#example .files').text('非图片类型文件，请重传'); return false; } } button.text('文件上传中'); if(fileNum == 'one') this.disable(); interval = window.setInterval(function(){ var text = button.text(); if (text.length < 14){ button.text(text + '.'); } else { button.text('文件上传中'); } }, 200); }, onComplete: function(file, response){ if(response != "success") alert(response); button.text('文件上传'); window.clearInterval(interval); this.enable(); if(response == "success"); $('<li></li>').appendTo('#example .files').text(file); } }); });
注释 ： 第1行：$(document).ready()函数，Jquery中的函数，类似于window.load，使用这个函数可在DOM载入就绪能够读取并操纵时立即调用绑定的函数。
第3行：fileType和fileNum参数代表上传文件的类型和数量，默认值为可上传所有类型文件，同一时间只能上传一个文件，如想上传图片文件或同时上传多个文件，可将这两个变量值变为pic和more。
第6~8行：POST到服务器的数据，你可以设置静态值也可以通过Jquery的DOM操作函数获得一些动态值，比如form表单中INPUT的值等。
查看更多关于Jquery AjaxUpload实现文件上传功能代码实例教程_自的详细内容...